跨浏览器问题

Question

跨浏览器问题

daz*_*sed 1 html css internet-explorer cross-browser

我的背景是在WinForms编程中,我试图分析一下.我发现跨浏览器问题总的来说是一个令人沮丧的障碍,但有一个我似乎无法解决的具体问题.

我想显示图像并在顶部和底部放置一个半透明条.当然,这不是我的最终目标,但它展示了我在一个相对较短的,自包含的代码片段中遇到的问题,所以让我们继续吧.

下面的示例代码按照Chrome,Safari和Firefox中的预期显示.在IE8中,底部的栏根本不显示.我已经研究了几个小时,但似乎无法提出解决方案.

我确定这是一个愚蠢的新手错误,但必须从某个地方开始.代码片段......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" language="javascript">
</script>
<style type="text/css">
    .workarea
    {
        position: relative;
        border: 1px solid black;
        background-color: #ccc;
        overflow: hidden;
        cursor: move;
        -moz-user-focus: normal;
        -moz-user-select: none;
        unselectable: on;
    }

    .semitransparent
    {
        filter: alpha(opacity=70);
        -moz-opacity: 0.7;
        -khtml-opacity: 0.7;
        opacity: 0.7;
        background-color: Gray;
    }
</style>
</head>
<body style="width: 800px; height: 600px;">
<div id="workArea" class="workarea" style="width: 800px; height: 350px;
    left: 100px; top: 50px; background-color: White; border: 1px solid black;">
    <img alt="" src="images/TestImage.jpg" style="left: 0px; top: 0px; border: none;
        z-index: 1;" />
    <div id="topBar" class="semitransparent" style="position: absolute;width: 800px;
        height: 75px; left: 0px; top: 0px; min-height: 75px; border: none; z-index: 2;" />
    <div id="bottomBar" class="semitransparent" style="position: absolute; width: 800px;
        height: 75px; left: 0px; top: 275px; min-height: 75px; border: none; z-index: 2;" />
</div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jac*_*kin 5

您是自动关闭div标签,不允许自动关闭.

你必须这样关闭div标签:</div>.

有些浏览器会支持像这样的愚蠢错误,并尝试为您关闭标记.另一方面,IE没有.

试试这个:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" language="javascript">
</script>
<style type="text/css">
    .workarea
    {
        position: relative;
        border: 1px solid black;
        background-color: #ccc;
        overflow: hidden;
        cursor: move;
        -moz-user-focus: normal;
        -moz-user-select: none;
        unselectable: on;
    }

    .semitransparent
    {
        filter: alpha(opacity=70);
        -moz-opacity: 0.7;
        -khtml-opacity: 0.7;
        opacity: 0.7;
        background-color: Gray;
    }
</style>
</head>
<body style="width: 800px; height: 600px;">
<div id="workArea" class="workarea" style="width: 800px; height: 350px;
    left: 100px; top: 50px; background-color: White; border: 1px solid black;">
    <img alt="" src="images/TestImage.jpg" style="left: 0px; top: 0px; border: none;
        z-index: 1;" />
    <div id="topBar" class="semitransparent" style="position: absolute;width: 800px;
        height: 75px; left: 0px; top: 0px; min-height: 75px; border: none; z-index: 2;" ></div>
    <div id="bottomBar" class="semitransparent" style="position: absolute; width: 800px;
        height: 75px; left: 0px; top: 275px; min-height: 75px; border: none; z-index: 2;"></div>
</div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年，6 月前
查看次数：	394 次
最近记录：	15 年，6 月前