IE渲染内联块div与FF / Chrome不同 [英] IE renders inline-block div differently than FF/Chrome
问题描述
首先，我使用的是IE9，FF 29.0.1和Chrome 35.0.1916.153 m。我已经做了相当多的搜索，尝试了跨度而不是div，浮动而不是内联块，不同的DOCTYPE，添加z顺序，确保每个div都有唯一的ID等等。当问题变得清晰时你在IE中使用F12来查看封面，IE只是以不同于FF或Chrome的方式呈现HTML / CSS。这是页面。我已将其降低到最低公分母。
First, I'm using IE9, FF 29.0.1 and Chrome 35.0.1916.153 m. I have done quite a bit of searching, tried spans instead of divs, float instead of inline-block, different DOCTYPEs, adding a z-order, making sure each div had a unique ID, etc., etc. The problem becomes clear when you hit F12 in IE to look under the covers, IE simply renders the HTML/CSS differently than FF or Chrome. Here's the page. I have reduced this to its lowest common denominator.
http://iamix.net/p/ie-problem.html
问题（如您所见）是按钮文字出现在下方FF / Chrome上的按钮，应该是，但在IE9的按钮之上。当你看看IE如何渲染页面时，它需要第一个button_block div并使其成为其他三个的一个准父级。 FF（使用Firebug）显示它按预期呈现HTML / CSS，四个button_block divs兄弟中的每一个。
The problem (as you will see) is the button text appears below the buttons on FF/Chrome, as it should, but on top of the buttons in IE9. When you look at how IE has rendered the page, it takes the first button_block div and makes it some kind of quasi-parent of the other three. FF (using Firebug) shows that it renders the HTML/CSS as expected, with each of the four button_block divs siblings.
这是IE& FF渲染：
Here's the IE & FF rendering:
http://iamix.net /p/rendering.html （猜我需要一个代表才能直接发布图片......噢，猜我需要一个代表来发布两个以上的链接，所以我把这两个图片放在这里）
http://iamix.net/p/rendering.html (guess I need a rep to directly post images... ooo, guess I need a rep to post more than two links, so I've put both images here)
此处的总体目标是使布局能够很好地适应不同的屏幕尺寸，包括智能手机。原版中有一些媒体查询来调整屏幕大小，但我已经删除了所有可能仍然存在的问题。在CSS中加载图像的原因是因为根据屏幕大小使用不同的图像大小（如果媒体查询仍然存在，您将看到）。完整的HTML / CSS适用于PC和Android手机（主要目标）上的FF / Chrome。 IE是坚持者（像往常一样）。即使我一直在打字，我还尝试了其他八件事，因为我真的不想让它成为我忽略的傻事。
The overall goal here is to have a layout that adjusts well to different screen sizes, including smartphones. The original has some media queries in it to adjust for screen size but I have removed everything I could with the problem still being present. The reason for loading the images in CSS is because different image sizes are used based on the screen size (which you would see if the media queries were still present). The full-blown HTML/CSS works well in FF/Chrome on the PC and on Android phones (which is the main target). IE is the stickler (as usual). Even as I've been typing this up I've tried about eight other things because I really don't want it to be something silly that I've overlooked.
以下是我正在处理问题的基本代码（来自上面的第一个链接）：
Here's the basic code I'm working from where the problem still exists (from the first link above):
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.button_bar {
padding-bottom: 0.5em;
text-align:center;
}
.button_bar button {
border: none;
height: 250px;
width: 270px;
}
#first_button {
background: url(http://iamix.net/p/first-button.png) 0px/250px no-repeat;
background-position: center center;
}
#second_button {
background: url(http://iamix.net/p/second-button.png) 0px/250px no-repeat;
background-position: center center;
}
#third_button {
background: url(http://iamix.net/p/third-button.png) 0px/250px no-repeat;
background-position: center center;
}
#fourth_button {
background: url(http://iamix.net/p/fourth-button.png) 0px/250px no-repeat;
background-position: center center;
}
.button_block {
display: inline-block;
padding: 0.5em 0 1em 0;
vertical-align: top;
}
.button_text {
background: #FFFF80;
color: black;
display: inline-block;
font-weight: bolder;
text-align: center;
width: 240px;
word-wrap: break-all;
}
</style>
</head>
<body>
<div>
<div class="button_bar">
<div class="button_block">
<div>
<button id="first_button" type="button" />
</div>
<div>
<span class="button_text">This is the First Button</span>
</div>
</div>
<div class="button_block">
<div>
<button id="second_button" type="button" />
</div>
<div>
<span class="button_text">And this is the Second Button</span>
</div>
</div>
<div class="button_block">
<div>
<button id="third_button" type="button" />
</div>
<div>
<span class="button_text">Which would make this the Third Button</span>
</div>
</div>
<div class="button_block">
<div>
<button id="fourth_button" type="button" />
</div>
<div>
<span class="button_text">And this the Fourth and Final Button</span>
</div>
</div>
</div>
</div>
</body>
</html>
推荐答案
在HTML中，按钮不是自动关闭 标签，因此，IE实际上是正确的。只需将 /> 附加到标记，就不会像在XML中那样自动关闭它。你需要这样做：
In HTML, button is not a "self-closing" tag, therefore, IE is actually doing it correctly. Just appending the /> to a tag does not automatically close it, as it does in XML. You need to do this:
<button id="fourth_button" type="button"><span>Button Text</span></button>
这篇关于IE渲染内联块div与FF / Chrome不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
