关于 inline-block 的另一个问题以及如何使 IE 和 Firefox 等工作相同

发布于 2024-11-27 00:57:42 字数 1743 浏览 0 评论 0原文

我一直在尝试做一些学习练习,我认为应该相当简单,但无法让它在 IE 8 上工作。我试图绘制一个看起来像一个小对话框的网页,带有一个标题元素、正文和带有“确定”和“取消”按钮的页脚。下面是一个简单的示例(目前没有按钮),在 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>

I've been trying to do something as a learning exercise that I thought should have been fairly simple but can not get it to work on IE 8. I am trying to just draw a web page that looks like a little dialog, with a title element, body, and a footer with an OK and Cancel button. Below is the simple example (no buttons for now) that looks fine in Firefox, I get a nice little square in the upper left of the window. Of course IE draws it as a huge, full width and height square. The key is that I do not want to specify a width, since I plan on using this layout many times with different data, I would like it to expand to fit. I found some comments about setting setting zoom: 1 and then adding *display: inline but I cannot get it to work. Is there an fairly easy solution or do I just need to give up and use tables? Thanks

<!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>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

-小熊_ 2024-12-04 00:57:42

此文档类型:

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

导致怪癖模式

如果您切换到完整的“HTML 4.01 Transitional”文档类型,问题将得到解决:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

或者,更简单的是,HTML5 文档类型:

<!DOCTYPE html>

This doctype:

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

causes Quirks Mode.

The problem will be resolved if you switch to the full "HTML 4.01 Transitional" doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Or, even easier, the HTML5 doctype:

<!DOCTYPE html>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文