Question

我的背景是在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>

Answer 1

您正在自动关闭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>

跨浏览器问题

1 个答案: