css - Internet Explorer 6 css 顺序很重要的错误

标签 css internet-explorer styles internet-explorer-6

也许一整天后,我探索了 IE6 中的新错误(对我而言)。 css 样式的顺序很重要。该样式仅适用于第一个 child (在 css 文件中,而不是在元素中)。这很难解释,但示例会告诉您我的意思。

<!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>

因此,如果将类“一”更改为类“二”,则 div 将失去样式。 款式一和款式二完全一样。

但是如果你改变:

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

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

并将样式从:

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

到:

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

只需将类“一”与类“二”交换 “二”类会起作用,但“一”类不会。 如何解决这个问题或者这是不可能的?

最佳答案

这是一个 known IE6 bug .它会忽略除第一个之外的所有 #id.class

关于css - Internet Explorer 6 css 顺序很重要的错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11488079/

相关文章:

css - 第 n 个 child (奇数)不工作

CSS calc() 将小数转换为像素

php - 使背景图像 SVG 像内联元素一样工作

html - IE中列表之间的差距

IE 中的 Wordpress Bootstrap css3 样式错误

xaml - DatePicker 弹出演示者样式

jquery - 当浏览器滚动到某个元素时更改该元素的 CSS

html - 封面背景图片与 IE 不兼容,试图找到可行的替代方案

android - 新的 Android 12+ MaterialSwitch 和 androidx.preference

html - 图像上带有文本的透明 div