CSS hack

I have always been very narrow-minded and biased against CSS hacks. I felt that these "evil ways" should not be used in well-written code. However, a small problem in the recent product release gave me a headache for a long time. Finally, after checking the information, it turned out that It's easy to solve using CSS hack. I have to accept it. You have to use these tools to deal with the magical IE.

What is CSS hack

Because different browsers, or even different versions of the same browser, have different understandings of CSS parsing, resulting in inconsistent effects on the generated pages, writing instructions for different browsers CSS code is called CSS hack.

There are three commonly used CSS hacks, CSS internal hacks, selector hacks, and HTML header references, of which the first is the most commonly used.

CSS internal hack

Serious CSS is written like this

nbsp;html>
    
        <title>Test</title>
        <style>
            .test            {
                background-color:green;
            }
        </style>
    
    
        <p></p>
    

This code is for all currently commonly used browsers It works, the result should be like this

But some such writing methods are common in CSS3

/*Mozilla内核浏览器：firefox3.5+*/
  -moz-transform: rotate | scale | skew | translate ; /*Webkit内核浏览器：Safari and Chrome*/
  -webkit-transform: rotate | scale | skew | translate ; /*Opera*/
  -o-transform: rotate | scale | skew | translate ; /*IE9*/
  -ms-transform: rotate | scale | skew | translate ; /*W3C标准*/
  transform: rotate | scale | skew | translate ;

If there were no comments, at first glance it would seem weird, but this kind of code works just fine! This kind of code is really easy to use. The current CSS3 standard has not been unified. Each browser has its own way of expression. Some even implement it, and some do not. Add some prefixes in front to indicate support for a specific browser. This is also The basic principles of CSS internal hacks are simple and easy to understand, but the real CSS hack is far more than that, because there is the immortal IE6 and its various weird brother versions.

The CSS internal hack syntax is like this selector{?property:value?;}. The code above shows the hack before the property name. Of course, there is also this

*background-color:green;

Adding a "*" in front of the attribute will only take effect on IE6 and 7. Other versions of IE and modern browsers will ignore this instruction (no special instructions, this article All hacks refer to the effect of documents that declare DOCTYPE)

-background-color:green;

There is a "-" in front of the attribute, which is only recognized by IE6, and there are some hacks at the back

background-color:green!important;

The writing method of adding "!important" after the attribute value is not recognized by IE6 only, but can be recognized by other versions of IE and modern browsers, as well as "+", " \0”, “\9”, etc. It’s such a mess, so draw a table

	IE6	IE7	IE8	IE9	IE10	现代浏览器
*
+
-
!important
\9
\0
\9\0

这样就清楚多了吧。如果只想给上面的test p在IE访问的时候加绿色背景，就可以这么写

background-color:green\9;

如果想IE6红色，IE7绿色，其它黄色（当然没人这么无聊）就可以这么写

background-color:green;
+background-color:green;
_background-color:green;

选择器hack

选择器hanck主要是针对IE浏览器，其实并不怎么常用，语法是这样的： selector{ sRules }

	IE6	IE7	IE8	IE9	IE10	现代浏览器
*html
*+html
:root

针对IE9的hack可以这么写

:root .test{
    background-color:green;
}

HTML头部引用

HTML头部引用就比较特殊了，类似于程序语句，只能使用在HTML文件里，而不能在CSS文件中使用，并且只有在IE浏览器下才能执行，这个代码在非IE浏览下非单不是执行该条件下的定义，而是当做注释视而不见。

<link><link><link>

lte：就是Less than or equal to的简写，也就是小于或等于的意思。

lt ：就是Less than的简写，也就是小于的意思。

gte：就是Greater than or equal to的简写，也就是大于或等于的意思。

gt ：就是Greater than的简写，也就是大于的意思。

! ：就是不等于的意思，跟javascript里的不等于判断符相同。

书写顺序

看看，看看，这么多姿势，那么一个效果，好多种写法，什么顺序写才能保证各个浏览器都得到希望的效果呢？因为CSS只要是同一级别，出现重复属性设置，后出现的会覆盖前面出现的，所以在书写的时候一般把识别能力强的写前面，看个例子

_background-color:red;
background-color:green;

如果希望p在IE6上是红色，其它是绿色，上面的写法可不可以呢？试一下发现所有浏览器上都是绿色，因为在IE6解析的时候，第一句能够识别，背景设为红色，但是第二句所有浏览器都识别，IE6也不例外，背景颜色又被设为绿色，所以得反过来写

background-color:green;
_background-color:red;

总结出的规律就是：先一般，再特殊。有兴趣的同学可以试试试试下面CSS，看看和你想的效果是否一样

background-color:blue; /*所有浏览器*/background-color:red\9;/*所有的ie*/background-color:yellow\0; /* ie8+*/+background-color:pink; /*+ ie7*/

更多CSS hack 相关文章请关注PHP中文网！