Question

简而言之。我有这样的事情：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
    <style>
    .vertical_panel > .fields > .item {
        display: block;
        background-color: #344;
    }

    .horizontal_panel > .fields > .item {
        display: inline;
        background-color: #FAE;
    }

    .item {
        width: 100px;
        height: 50px;
        margin: 2px;
    }

    .fields {
        margin: 0px;
        padding: 0px;
    }

    #specialSpan {
        display: table;
        margin: 0px auto;   
    }
    </style>
</head>
<body>

<div  class="horizontal_panel" id = "specialSpan" style="width: 300px; height: auto;">
    <fieldset class="fields">
        <span class="vertical_panel item" style="width: 300px; height: auto;">
            <fieldset class="fields">
                <div class="item">
                    <span>text</span>
                </div>

                <div class="item">
                    <span>text</span>
                </div>
            </fieldset>
        </span>

        <div class="item">
            <span>text</span>
        </div>

        <div class="item">
            <span>text</span>
        </div>
    </fieldset>
</div>

</body>
</html>

它是我的代码结构的近似值。字段内有更多元素。所以，我有一个javascript函数可以切换面板类。

问题是：我有正确的选择器，设置了正确的样式值（显示），但Internet Explorer 8没有正确应用它。如果我调用该函数，这些项目不会改变它们的方向。在“不改变方向”下，我的意思是项目不会呈现为display: block或display: inline。

有一个关键部分：如果我打开调试工具并为面板手动输入display: inline，几乎所有内容都很好。但是如果我在手动样式更改之前有正确的视图并且我已经改变了样式，我就无法通过普通的方式将视图恢复正常 - 通过函数调用。

该功能类似于：

function SetPanelOrientation(panel) {
    // this attribute doesn't exit in example but actually exist in project's code
    // and always correct
    var isVertical = panel.getAttribute("IsVertical");
    if (isVertical == '0') {
        $(panel)
            .removeClass('vertical_panel')
            .addClass('horizontal_panel');
    } else {
        $(panel)
            .removeClass('horizontal_panel')
            .addClass('vertical_panel');
    }
};

我可以在调试工具中看到类已更改，但视图没有更改。我已尝试使用block和inline-block的多种组合，但未找到工作组合。

Answer 1

由于您正在使用的文档类型，您处于怪癖模式，IE将像1998年一样重演。自1999年以来，新网页不应该使用该文档类型。

唯一的解决方法是将元素的CSS属性设置为您希望它们与其他浏览器正确显示它们的方式。

Answer 2

doctype中没有任何内容，也没有属性值。使用jquery而不是css文件帮助设置样式。

Internet Explorer 8无法正确显示内联和阻止

2 个答案: