Browser compatibility that we have handled together in those years, and browser compatibility

Browser compatibility that we have handled together in those years, and browser compatibility

Two years ago, I stepped out of the school gate and entered the company's door. I became a front-end engineer. It was very tough. Do you think it was too tall ...... The front-end code is simple !!!!!!!!!!! Low barrier !!!!!!!!!!!!! In and out of upscale office buildings !!!!!!!! High salary !!!
I don't want to express my little heart. How long have you been sad ......
HTML, JSON, JS, CSS, JQUERY, have wood!
Let's just talk about this compatibility problem. There are a lot of questions! This is going to go to IE6, and it's going to be 360, Baidu, Cheetah, and so on. A lot of Web browsers are available! What is compatibility?
MD and XP systems are not updated, so we can change the browser to S. If we change the new version to a new style, let's take a look at the new world. You will be Over!
If you don't talk about it, it's all tears. I'll share some of the compatibility with the processing in the past two years;

I have to say that! [B] [size = 7] [color = Yellow] despise [/color] [/size] [/B] IE;

1. Use the clearfix class to clear the float; Introduce the class to the position where the float needs to be cleared.

. Clearfix {
Display: block;
Zoom: 1;
}
. Clearfix: after,. clearfix: before {/* sets an empty element to clear the floating between elements. This can only be applied to most compliant browsers ;*/
Visibility: hidden;
Display: block;
Font-size: 0;
Content :"";
Clear: both;
Height: 0;
}
* Html. clearfix {height: 1%;/* This is to trigger IEhaslayout */}
. Clearfix {display: block ;}

2. 3 pixels in IE6;

Sometimes, this IE6 may inexplicably add a few pixels. This is a very annoying thing. After all, it is a bit miserable to us to precisely deploy it here!

However, you can use _ margin-right:-3px;

3. In IE6 and earlier browsers, when the internal li element defines the inline element of the display: block, a blank space is generated at the bottom.

Add: zoom: 1;
Set UL's width

4. Image opacity solution for earlier versions of ie png;

Small but relatively lazy, so this issue of PNG transparency still prefers to use JS for processing; these JS has a lot of demos on the Internet, you can find them, small users prefer to use this [url = URLs.
The specific introduction method is: <! -- [If IE 6]>
<Script src = "css/DD_belatedPNG_0.0.8a.js" mce_src = "css/DD_belatedPNG_0.0.8a.js"> </script>
<Script type = "text/javascript"> DD_belatedPNG.fix ('*'); </script>
<! [Endif] -->

5. After img introduces the image, there will be several pixels of blank space

Img {display: block;} can be added ;}

6. How to set the mouse to show the hand shape in all browsers

. P {cursor: pointer ;}

7. Implement vertical center of known high-width elements;

# Div {
Position: relative;
Width: 400px;
Height: 400px;
Border: 1px solid # f00;
Top: 50%;
Left: 50%;
Margin-left:-200px;
Margin-top:-200px;
}

8. Set the span height and width of the inline element;
Span {
Display: block;
Width: 200px;
Height: 35px;
}

9. The hyperlink is retained with dotted boxes;
A {
Outline: none;
}


10. After the element transparency is set, the content in the element will become transparent;
. Wraper {width: 200px; height: 200px; background: # f00; filter: alpha (opacity = 50); opacity:. 5 ;}
. Content {width: 200px; height: 200px; margin-top:-200px ;}
<Div class = "wraper"> </div>
<Div class = "content"> </div>

11. Set the horizontal center of the element;
# Div {
Width: 980px;
Margin: 0px auto;
}

12. Text vertical center, first line indent;
# Lh20 {
Height: 20px;
Line-height: 20px;
Text-indent: 1em;
}

13. After floating is set, IE will have double spacing;
# Div {
Float: left;
Display: inline;
}