0

cssルールがあります。その仕事は、私のサイトテンプレートの左側の列を正しい位置に配置することです。私は自分のCSSを最適化しようとしています。

* html #left { left:220px }

以下のcssは同じように機能すると思います...ChromeやIE9では機能しません

#left {left:220px}

ただし、パス全体を以下のように明示的に定義すると...正しく機能します。

html body div div #left

ページで使用されているのはCSSのみです。Chromeインスペクターで確認済み。

html {
margin-left:auto;
margin-right:auto;
font-size:80%;
width:100%;
}


.ie7 {
font-size:80%;
width:100%;
}

.ie8 {
font-size:80%;
width:100%;
}

.ie9 {
font-size:80%;
width:100%;
}


body 
{
position:relative;
text-align:center;
font: .95em "Arial","Helvetica","Trebuchet MS","Verdana","Times New Roman","Sans-Serif"; 
min-width:960px;
max-width:960px;
margin: 0px auto auto auto;
padding:0px 10px;
}


        #header
        {
            text-align:left;
        }

        #container {
            padding-left: 220px;      /* LC width */
            padding-right: 30px;     /* RC width */
            overflow: hidden;
            min-height:100%;
            padding-bottom:300px; 
            background-color:White;
        }

        #container .column {
            position: relative;
            float: left;
            padding-bottom: 20010px;  /* X + padding-bottom */
            margin-bottom: -20000px;  /* X */           
        }



        #left {
            width: 200px;             /* LC width */
            padding:0 10px;
            right: 260px;             /* LC width */
            margin-left: -100%;


        }

    /*  #right {
            width: 200px;             
            padding:0px 10px;
            margin-right: -290px;               
        }
        */

                #center {
            width: 100%;
            background-color:#fff;
            padding: 10px 20px;         
        }

        #footer-wrapper
        {
            background-color:#fff;
        }

        #footer {
            clear: both;
            position: relative;
            background-color:#163748; 
            color:white;
            padding:0;
            text-align:center;
            /*border-top:1px solid #9fa8ac;*/
            height:150px; 
            padding-top:10px;                       
        }
        #footer p
        {
            text-align:center;
        }

#footer a
{
    color:White;

}

.clear
{
    clear: both;
}


#left 
{
    left:220px;
}
4

2 に答える 2

2

最適化しようとしているCSSは次のとおりです。

* html #left { left:220px }

問題が発生している理由は、実際には特定のブラウザで動作するように設計されたCSSハックであるためです。

html標準に準拠したブラウザでは、DOMに上記の要素がないため* html、意味がなく、何も選択されません。

ただし、IEの特定のバージョンでは、これは実際に機能しました。したがって、* htmlセレクターでの使用は、これらのバージョンのIEでのみ機能させたいコードのCSSハックです。

メモリから、この特定のハッキングはIE6でのみ機能しました。つまり、そのコードを書いた人は、他のブラウザーでは表示されなかったIE6の問題をハッキングして修正しようとしていました。leftプロパティを他のブラウザとは異なるものに設定する別の行があることに気付くでしょう。

明らかに、これはIE9で実行したいコードではありません。

運が良ければ、IE6をサポートする必要はもうありません。その場合、このハックを完全に捨てることができます。

運が悪く、IE6のサポートを継続する必要がある場合は、コードをそのままにしてください。誰も傷つけません。

お役に立てば幸いです。

于 2012-10-27T21:50:31.763 に答える
0

実際のコードを見ずに、これはCSSの特異性の問題だと思います。

ここにあなたが啓発するかもしれないトピックに関するいくつかの記事があります：

http://css-tricks.com/specifics-on-css-specificity/

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

于 2012-10-27T21:47:44.487 に答える