Internet explorer 关于内联块以及如何使IE和Firefox等工作相同的另一个问题_Internet Explorer_Firefox_Inline_Block

Internet explorer 关于内联块以及如何使IE和Firefox等工作相同的另一个问题

internet-explorer firefox

Internet explorer 关于内联块以及如何使IE和Firefox等工作相同的另一个问题,internet-explorer,firefox,inline,block,Internet Explorer,Firefox,Inline,Block,我一直在尝试做一些我认为应该相当简单的学习练习，但无法在IE8上使用。我正在尝试绘制一个看起来像一个小对话框的网页，带有标题元素、正文和带有“确定”和“取消”按钮的页脚。下面是一个在Firefox中看起来不错的简单示例（目前没有按钮），我在窗口左上角看到了一个漂亮的小正方形。当然，IE把它画成一个巨大的、全宽和高的正方形。关键是我不想指定宽度，因为我计划对不同的数据多次使用此布局，我希望它能够扩展以适合。我找到了一些关于设置zoom:1，然后添加*display:inline的评论，但我无法让它

我一直在尝试做一些我认为应该相当简单的学习练习，但无法在IE8上使用。我正在尝试绘制一个看起来像一个小对话框的网页，带有标题元素、正文和带有“确定”和“取消”按钮的页脚。下面是一个在Firefox中看起来不错的简单示例（目前没有按钮），我在窗口左上角看到了一个漂亮的小正方形。当然，IE把它画成一个巨大的、全宽和高的正方形。关键是我不想指定宽度，因为我计划对不同的数据多次使用此布局，我希望它能够扩展以适合。我找到了一些关于设置zoom: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>


你好
.对话{
背景：红色；
显示：内联块；
缩放：1；
*显示：内联；
}
.对话框标题{
背景：蓝色；
利润率：10%；
}
.对话框项{
背景：黄色；
明确：两者皆有；
}
.对话框页脚{
背景：绿色；
利润率：10%；
}
.对话框ok{
显示：内联；
浮动：左；
背景：黑色；
}
.对话框取消{
显示：内联；
浮动：对；
背景：棕色；
}
对话标题
按钮1
按钮2

此文档类型：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

原因

如果切换到完整的“HTML 4.01 Transitional”doctype，问题将得到解决：

或者更简单的HTML5 doctype：

<!DOCTYPE html>

谢谢您，先生！一些如此简单，但css noobs很难理解的东西。

<!DOCTYPE html>