CSS browser compatibility and css browser compatibility

CSS browser compatibility and css browser compatibility

Common CSS browser compatibility problems and solutions:

1. Vertical center of div

The vertical-align attribute of CSS works for elements with the valign attribute in (x) html. For example, <caption>, <th>, <td>, elements such as <div> and <span> do not have the valign feature. veritcal-align does not work for these elements.

 

How can we solve IE browser compatibility? Div + css

The browser compatibility problem refers to the situation where different browsers have different resolutions for the same piece of code, resulting in inconsistent page display effects. In most cases, our requirement is, no matter which browser the user uses to view our website or log on to our system, the display effect should be consistent. With the increase in browser versions, it is particularly important to solve IE browser compatibility.
I ,! Important (limited function)
With IE7! Important Support ,! The important method is only compatible with ie6. (note the writing method. Remember that the declaration position must be in advance .)
For example:
# Example {
Width: 100px! Important;/* IE7 + FF */
Width: 200px;/* IE6 */
}
Ii. css hack method (for beginners, let's take a look at it and pass it)
The first thing you need to know is:
General height for all browsers:
100px;
IE6 dedicated _ height: 100px;
IE7 dedicated * + height: 100px;
IE6 and IE7 share * height:
100px;
IE7 and FF share height: 100px
! Important;
For example:
# Example {height: 100px;}/* FF */
* Html # example {height: 200px;}/* IE6 */
* + Html # example {height: 300px;}/* IE7 */
The following method is relatively simple:
For example:
1. IE6-IE7 + FF
# Example {
Height: 100px;/* FF + IE7 */
_ Height: 200px;/* IE6 */
}
In fact, the first method mentioned above can also be used.
# Example {
Height: 100px! Important;/* FF + IE7 */
Height: 200px;/* IE6 */
}
2. IE6 + IE7-FF
# Example {
Height: 100px;/* FF */
* Height: 200px;/* IE6 + IE7 */
}
3. IE6 + FF-IE7
# Example {
Height: 100px;/* IE6 + FF */
* + Height: 200px;/* IE7 */
}
4. IE6 IE7 FF varies
# Example {
Height: 100px;/* FF */
_ Height: 200px;/* IE6 */
* + Height: 300px;/* IE7 */
}
Or:
# Example {
Height: 100px;/* FF */
* Height: 300px;/* IE7 */
_ Height: 200px;/* IE6 */
}
It should be noted that the order of the Code must not be reversed, or you will not be able to discard it. Because when the browser interprets the program, if the name is duplicated, it will overwrite the previous one, just like assigning a value to the variable, so we put the general purpose above, the more dedicated, the more you put the back
Explain the code 4:
When you read the code, the first line of height is PX. It is common to all users. ie6...... the remaining full text >>>

CSS browser compatibility

Different ie versions are different. We recommend that you use css hack and 360. If it is a quick browser, it is similar to chrome. If it is a common 360, it is your local ie kernel, it may be slightly different.
You can adjust the position in step 360 first, and then adjust ie. Do not change the previous configuration when you adjust ie,
Use css hack again to adjust ie.