Я пытался сделать что-то в качестве учебного упражнения, которое, по моему мнению, должно было быть довольно простым, но не может заставить его работать в IE 8. Я пытаюсь просто нарисовать веб-страницу, которая выглядит как небольшой диалог, с элементом заголовка, телом и нижним колонтитулом с кнопками ОК и Отмена. Ниже приведен простой пример (пока нет кнопок), который отлично выглядит в Firefox, я получаю симпатичный маленький квадрат в левом верхнем углу окна. Конечно, IE рисует его как огромный квадрат шириной и высотой. Ключевым моментом является то, что я не хочу указывать ширину, так как я планирую использовать этот макет много раз с разными данными, я бы хотел, чтобы он расширялся, чтобы соответствовать. Я нашел несколько комментариев о настройке масштаба: 1 и добавлении * display: inline, но я не могу заставить его работать. Есть ли достаточно простое решение или мне просто нужно отказаться от использования таблиц? Спасибо
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>HI THERE</title>
<style>
.dialog {
background: red;
display: inline-block;
zoom: 1;
*display: inline;
}
.dialog-title {
background: blue;
margin: 10%;
}
.dialog-item {
background: yellow;
clear: both;
}
.dialog-footer {
background: green;
margin: 10%;
}
.dialog-ok {
display: inline;
float: left;
background: black;
}
.dialog-cancel {
display: inline;
float: right;
background: brown;
}
</style>
</head>
<body>
<div class="dialog">
<form>
<div class="dialog-title">DIALOG TITLE</div>
<div class="dialog-item"><input type=text name=item1 size=20 value="ITEM1" /></div>
<div class="dialog-item"><input type=text name=item2 size=20 value="ITEM2" /></div>
<div class="dialog-footer">
<div class="dialog-ok">button1</div>
<div class="dialog-cancel">button2</div>
</div>
<div style="clear: both;"></div>
</form>
</div>
</body>
</html>