关于 inline-block 的另一个问题以及如何使 IE 和 Firefox 等工作相同
我一直在尝试做一些学习练习,我认为应该相当简单,但无法让它在 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
此文档类型:
导致怪癖模式。
如果您切换到完整的“HTML 4.01 Transitional”文档类型,问题将得到解决:
或者,更简单的是,HTML5 文档类型:
This doctype:
causes Quirks Mode.
The problem will be resolved if you switch to the full "HTML 4.01 Transitional" doctype:
Or, even easier, the HTML5 doctype: