文章/答案/技术大牛

发布

问CSS2与预期不符
EN

Stack Overflow用户

提问于 2012-10-28 05:41:40

回答 2查看 43关注 0票数 0

我有一个css规则。它的工作是把我的网站模板的左栏放在正确的位置。我正在试着优化我的css。

* html #left { left:220px }

我希望下面的css将工作的same...It不在Chrome或IE9

#left {left:220px}

但是，正确地将整个路径显式定义为below...works。

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;
}

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-10-28 05:50:32

你试图优化的CSS是这样的：

* html #left { left:220px }

你有问题的原因是因为它实际上是一个CSS黑客，设计用于特定的浏览器。

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

然而，在某些IE版本中，这确实起作用了。因此，在选择器中使用* html对于那些你只想在IE的那些版本中工作的代码来说是一种CSS hack。

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

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

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

如果您不走运，并且需要继续支持IE6，那么只要保持代码原样即可。它不会伤害任何人。

希望这能有所帮助。

票数 2

Stack Overflow用户

发布于 2012-10-28 05:47:44

在看不到实际代码的情况下，我猜测这是一个CSS专用性问题。

这里有几篇关于这个主题的文章，你可能会发现它们很有启发性：

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/13104443

复制

相似问题

问CSS2与预期不符
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS2与预期不符EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS2与预期不符
EN