Question

我有一条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;
}

Answer 1

您尝试优化的CSS是：

* html #left { left:220px }

你遇到问题的原因是因为它实际上是一个CSS黑客，旨在与特定浏览器一起使用。

在符合标准的浏览器中，DOM中没有html以上的元素，因此* html没有意义，也不会选择任何内容。

然而，在IE的某些版本中，这确实有效。因此，在选择器中使用* html是一个CSS hack代码，您只想在那些版本的IE中工作。

从内存来看，这个特殊的黑客只能在IE6中运行，这意味着编写该代码的人试图通过黑客攻击来解决IE6中没有出现在其他浏览器中的问题。您可能会发现还有另一行将left属性设置为与其他浏览器不同的属性。

显然，这不是您希望在IE9中运行的代码。

如果你很幸运，你不再需要支持IE6了，在这种情况下你可以完全抛弃这个黑客。

如果您运气不好，并且需要继续支持IE6，那么只需保持代码不变即可。它并没有伤害任何人。

希望有所帮助。

Answer 2

在没有看到实际代码的情况下，我的猜测是这是一个CSS特异性问题。

以下是关于该主题的几篇文章，您可能会发现这些文章具有启发性：

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

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

CSS2不符合预期

仅在页面上使用CSS。已在Chrome检查器中验证。

2 个答案: