CSS-Hack

Ich war immer sehr engstirnig und voreingenommen gegenüber CSS-Hacks. Ich hatte das Gefühl, dass diese „bösen Methoden“ nicht in gut geschriebenem Code verwendet werden sollten. Allerdings bereitete mir ein kleines Problem in der letzten Produktveröffentlichung Kopfschmerzen Nach langer Überprüfung der Informationen stellte sich heraus, dass es mit CSS-Hack leicht zu lösen ist, aber ich muss es akzeptieren. Sie müssen diese Tools verwenden, um mit dem magischen IE umzugehen.

Was ist CSS-Hack?

Da unterschiedliche Browser oder sogar unterschiedliche Versionen desselben Browsers unterschiedliche Verständnisse der CSS-Analyse haben, was zu inkonsistenten Auswirkungen auf die generierten Seiten führt, die für unterschiedliche Browser CSS geschrieben werden Code heißt CSS-Hack.

Es gibt drei häufig verwendete CSS-Hacks: interne CSS-Hacks, Selektor-Hacks und HTML-Header-Referenzen, von denen der erste am häufigsten verwendet wird.

CSS-interner Hack

Das seriöse CSS ist so geschrieben

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

Solcher Code ist für alle derzeit gängigen Browser geeignet Es funktioniert alles und das Ergebnis sollte so aussehen

Aber einige gängige Schreibmethoden wie diese sind in CSS3 üblich

/*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 ;

Wenn es keine Kommentare gäbe, würde ich es auf den ersten Blick für lächerlich halten, aber diese Art von Code funktioniert einwandfrei! Diese Art von Code ist wirklich einfach zu verwenden. Der aktuelle CSS3-Standard ist nicht einheitlich. Einige implementieren ihn sogar, andere nicht, um die Unterstützung für einen bestimmten Browser anzuzeigen Die Grundprinzipien interner CSS-Hacks sind einfach und leicht zu verstehen, aber der eigentliche CSS-Hack ist weit mehr, denn es gibt den unsterblichen IE6 und seine verschiedenen seltsamen Bruderversionen.

Die CSS-interne Hack-Syntax ist wie dieser Selektor{?property:value?;}. Natürlich gibt es auch diesen

*background-color:green;

Das Hinzufügen eines „*“ vor dem Attribut wird nur auf IE6 und 7 wirksam. Andere Versionen von IE und moderne Browser ignorieren diese Anweisung (keine Besonderheit). Anweisungen) , alle Hacks in diesem Artikel beziehen sich auf die Wirkung von Dokumenten, die DOCTYPE deklarieren)

-background-color:green;

Vor dem Attribut steht ein „-“, das ist wird nur von IE6 erkannt, und einige werden von IE6 erkannt. Der folgende Hack

background-color:green!important;

ist eine Möglichkeit, „!important“ nach dem Attributwert hinzuzufügen. Nur IE6 kann nicht erkennen Es kann auch von anderen IE-Versionen und modernen Browsern erkannt werden. Es gibt „+“, „.

	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中文网！