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 hack，旨在与特定浏览器一起使用。

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

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

根据记忆，这种特殊的黑客攻击只在 IE6 中有效，这意味着编写该代码的人试图通过绕过它来修复 IE6 中没有出现在其他浏览器中的问题。您可能会发现还有另一行将left属性设置为与其他浏览器不同的值。

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

如果幸运的话，您不再需要支持 IE6，在这种情况下，您可以完全抛弃这个 hack。

如果运气不好，需要继续支持 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 回答