Мой опыт в программировании на 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>