为什么FF和Safari在span和div中包含一个不同于其他浏览器的对象元素



我有以下测试页面:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Test</title>
    <style type="text/css">
        .test {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <span style="position:relative; left: 100px">
        <div>
            <object class="test" data="flash.swf">
                <param name="wmode" value="transparent"/>
            </object>
            <div class="test" style="background-color: red; opacity: 0.5"></div>
        </div>
    </span>
</body>
</html>

我希望类为"test"的对象和div元素的位置相同。但在FF和Safari中都不会发生这种情况。为什么?div和span的排列是它发生的必要条件。

您的HTML无效。跨度不能包含div.

浏览器执行错误恢复的方式并不总是一致的。

编写有效的HTML并使用验证器进行测试。

span是一个内联元素,它不能包含其他块元素。将display:block添加到您的span以使其阻塞,然后它就会工作。

工作示例

首先需要为对象display: block设置,也许这就是问题所在。。。

相关内容

最新更新