Cross Browser Issue

Мой фон в программировании WinForms, и я пытаюсь немного разветвиться. Я считаю, что проблемы с перекрестным браузером - это разочаровывающий барьер в целом, но у меня есть конкретный, который я просто не могу обработать.Cross Browser Issue

Я хочу отобразить изображение и разместить полупрозрачную панель сверху и снизу. Разумеется, это не моя конечная цель, но она демонстрирует проблему, которую я испытываю в относительно коротком, самодостаточном фрагменте кода, поэтому давайте покончим с этим.

Нижеприведенный пример кода показан в 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>

источник

2010-04-28 dazedandconfused

Вы самозакрывание с 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>

источник

2010-04-28 01:24:49

Я заметил IE сбросив теги просто потому, что не нравится, как они написаны в коде. Хороший глаз. –

Да, для списка самозакрывающихся тегов выйдите http://stackoverflow.com/questions/97522/what-are-all-the-valid-self-closing-tags-in-xhtml-as-implemented-by -the-major-br Firefox и Webkit (Safari, Chrome) достаточно умен, чтобы закрыть те теги для вас, поэтому он работал в этих браузерах. –

Просто потому, что вы можете полагаться на браузер, чтобы очистить свою разметку, это не значит, что вы должны это сделать. Придерживайтесь стандартов. – Ben

Cross Browser Issue

ответ

Смежные вопросы