How to solve the problem that outline is compatible with lower version IE?

Recently, I found that the buttons in the project are basically a gif picture, which is ridiculous. The most serious problem is that if the text in the button exceeds the length of the gif picture, the excess part will not be displayed, so the operability is not very low. Of course, it's hard for a versatile programmer. Here's my solution:

In the beginning, what I did was

<input type="button" value="Submission" class="cssLongButton">
CSS Style:
.cssLongButton{
    height:24px;
    border:1px solid #379AD8;
    outline:none;
    background: -webkit-linear-gradient(#FFFFFF, #DEF0E5); /* Safari 5.1 - 6.0 */
  	background: -o-linear-gradient(#FFFFFF, #DEF0E5); /* Opera 11.1 - 12.0 */
  	background: -moz-linear-gradient(#FFFFFF, #DEF0E5); /* Firefox 3.6 - 15 */
  	background: linear-gradient(#FFFFFF, #DEF0E5); / * standard syntax*/
  	//The code below is to solve the problem of IE compatibility of low version of gradient
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr="#FFFFFF",             
    endColorstr="#DEF0E5", gradientType="0");
}

In this way, the common style of all buttons can be solved. If the length increases, you can directly add style style control width to each label.

But this is only for the higher version of IE browser. Once the browser adds the compatibility view, when clicking the button, a black box will appear. At present, there is no good solution to solve the compatibility problem of the lower version of outline. But we can still eliminate the black frame.

<span class="cssLongButtonSpan">
    <input type="button" value="Submission" class="cssLongButton"/>
</span>
CSS Style:
.cssLongButtonSpan{
			height:24px;
  			border: 1px solid #379AD8;
  			border-bottom: 4px solid #379AD8;
  			display: inline-block;
}
INPUT.cssLongButton{
			height:24px;
			border: none;
			background: -webkit-linear-gradient(#FFFFFF, #DEF0E5); /* Safari 5.1 - 6.0 */
  			background: -o-linear-gradient(#FFFFFF, #DEF0E5); /* Opera 11.1 - 12.0 */
  			background: -moz-linear-gradient(#FFFFFF, #DEF0E5); /* Firefox 3.6 - 15 */
  			background: linear-gradient(#FFFFFF, #DEF0E5); / * standard syntax*/
  			filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr="#FFFFFF", endColorstr="#DEF0E5", gradientType="0");
}

Here is a turn to eliminate the black box. A layer of span tag is added outside the input box. The span tag is used to describe the style that should be added to the input tag. Just set the attribute of the input border to none.

Perfect solution.

Tags: Firefox IE Attribute

Posted on Fri, 31 Jan 2020 09:36:29 -0800 by kendallkamikaze