Due to compatibility issues between browsers, in order to make the pages show relatively consistent in different browsers or for other reasons during webpage creation, the website creator summarizes various Hack methods; these methods are often used before solving compatibility issues.
Shield IE browsers (that is, they are not displayed under IE)
The code is as follows: |
Copy code |
*: Lang (zh) select {font: 12px! Important;}/* FF, OP visible. Note: Due to the recent upgrade of Opera, this sentence is only recognized by FF */
Select: empty {font: 12px! Important;}/* safari visible */ |
Here, select is the selector, which can be changed as needed. The second sentence is unique to the safari browser on MAC.
Only IE7 and IE5.0 can be recognized
The code is as follows: |
Copy code |
* + Html select {...}
|
This HACK can be used only for IE7 and IE5.0.
Only IE7 can recognize
The code is as follows: |
Copy code |
* + Html select {...! Important ;} |
This HACK can be used only for IE7.
Identification of IE6 and IE6 or lower
The code is as follows: |
Copy code |
* Html select {...}
|
Note that many blogs have written the HACK of IE6. In fact, IE5.x can also identify this HACK. Not recognized by other browsers.
The code is as follows: |
Copy code |
Html/**/> body select {...} |
This sentence serves the same purpose as the previous one.
Only IE6 is not recognized, and IE6 is blocked
The code is as follows: |
Copy code |
Select {display/* block IE6 */: none ;}
|
Here we mainly use CSS annotations to separate an attribute and a value, and comment it before the colon.
Only IE6 and IE5 are not recognized, blocking IE6 and IE5
The code is as follows: |
Copy code |
Select/**/{display/* IE6, IE5 does not recognize */: none ;}
|
The difference here is that a CSS comment is added between the separator and curly braces. IE5.5 is not blocked
Only IE5 is not recognized, and IE5 is blocked
The code is as follows: |
Copy code |
Select/* IE5 not recognized */{...}
|
This sentence removes the comment of the attribute area from the previous sentence. Only IE5 is not recognized, and IE5.5 is recognizable.
Box model solution
The code is as follows: |
Copy code |
Selct {width: IE5.x width; voice-family: ""} "; voice-family: inherit; width: correct width ;}
|
The box model clearing method is not passed! Important. This should be clear.
Clear floating
The code is as follows: |
Copy code |
Select: after {content: "."; display: block; height: 0; clear: both; visibility: hidden ;} |
In Firefox, when the child level is floating, the height of the parent level cannot fully cover the entire child level, in this case, the floating HACK can be used to define the parent level.
Ellipsis (...)
The code is as follows: |
Copy code |
Select {-o-text-overflow: ellipsis; white-space: nowrap; overflow: hidden ;}
|
This is a good technique to cut out more text and end it with a ellipsis. But Firefox does not currently support it.
Only Opera recognition
The code is as follows: |
Copy code |
@ Media all and (min-width: 0px) {select {......} } |
Set the Opera browser separately.
The above are some HACK in CSS, which are used to solve the local compatibility problem. If you want to separate the compatibility content, try several filters below. Some of these filters are written in CSS to import special styles through filters, and some are written in HTML to link or import the required patch styles through conditions.
IE5.x filter, only visible to IE5.x
The code is as follows: |
Copy code |
@ Media tty { I {content: "";/* "*/} @ import 'ie5win.css ';/*";} }/**/ |
IE5/MAC filters are generally not required
The code is as follows: |
Copy code |
/**//*/ @ Import "ie5mac.css "; /**/ If condition Hack of IE <! -- [If IE]> Only IE <! [Endif] --> All IE identifiable <! -- [If IE 5.0]> Only IE 5.0 <! [Endif] --> Only IE5.0 can recognize <! -- [If gt IE 5.0]> Only IE 5.0 + <! [Endif] --> Both IE5.0 and IE5.5 can be identified. <! -- [If lt IE 6]> Only IE 6-<! [Endif] --> Only IE6 can recognize <! -- [If gte IE 6]> Only IE 6/+ <! [Endif] --> IE5.x under IE6 and IE6 can be recognized <! -- [If lte IE 7]> Only IE 7/-<! [Endif] --> |