Internet Explorer 6 CSS顺序重要错误

Question

After maybe all day I explore new bug (for me) in IE6. 也许整整一天之后，我都会探索IE6中的新错误（对我而言）。 Order of css styles matters. CSS样式的顺序很重要。 The style work only for the first child ( in css file, not in element). 样式仅适用于第一个孩子（在css文件中，而在element中）。 It's hard to explain, but the examples will show you what I mean. 很难解释，但是这些示例将向您展示我的意思。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
    #container #p.one
    {
        position: absolute;
        left:50%;
        width: 20px;
        height: 20px;
        background: green;
    }
    #container #p.two
    {
        position: absolute;
        left:50%;
        width: 20px;
        height: 20px;
        background: green;
    }
    #container
    {
        position: absolute;
        z-index: 500;
        width: 100%;
        height: 100%;
    }
    </style>
</head>
<body>
    <div id="container">
        <div id="p" class="one">123</div> <!-- change class "one" with "two" -->
    </div>
</body>

So, if you change the class "one" with class "two", the div will lose the style. 因此，如果将类“一”更改为类“二”，则div将丢失样式。 Style one and two are exactly the same. 样式一和样式二完全相同。

But if you change : 但是，如果您更改：

<div id="p" class="one">

with 同

<div id="p" class="two">

and change the style from: 并从以下方式更改样式：

    #container #p.one
    {
        position: absolute;
        left:50%;
        width: 20px;
        height: 20px;
        background: green;
    }
    #container #p.two
    {
        position: absolute;
        left:50%;
        width: 20px;
        height: 20px;
        background: green;
    }
    #container
    {
        position: absolute;
        z-index: 500;
        width: 100%;
        height: 100%;
    }

to: 至：

    #container #p.two
    {
        position: absolute;
        left:50%;
        width: 20px;
        height: 20px;
        background: green;
    }
    #container #p.one
    {
        position: absolute;
        left:50%;
        width: 20px;
        height: 20px;
        background: green;
    }
    #container
    {
        position: absolute;
        z-index: 500;
        width: 100%;
        height: 100%;
    }

Just swap class "one" with class "two" Class "two" will work, but "one" not. 只需将类“一”与类“二”交换，类“二”将起作用，而“一”则不能。 How to fix this or it is impossible? 如何解决这个问题或不可能解决？

Answer 1

This is a known IE6 bug . 这是一个已知的IE6错误。 It will ignore every #id.class but the first. 它将忽略除第一个之外的所有#id.class 。

Answer 2

我不明白为什么您要在CSS规则中同时使用ID和类。.就其本质而言，ID可以/应该仅引用页面中的一个元素，因此＃p.two和＃p.one应该只是#p ???

Internet Explorer 6 CSS顺序重要错误

问题描述

2 个解决方案

解决方案1
4 已采纳 2012-07-15 01:06:12

解决方案2
0 2012-07-14 23:19:06

Internet Explorer 6 CSS顺序重要错误

问题描述

2 个解决方案

解决方案1 4 已采纳 2012-07-15 01:06:12

解决方案2 0 2012-07-14 23:19:06

解决方案1
4 已采纳 2012-07-15 01:06:12

解决方案2
0 2012-07-14 23:19:06