IE8 div对齐问题
Posted
技术标签:
【中文标题】IE8 div对齐问题【英文标题】：IE8 div alignment issue 【发布时间】：2013-08-30 18:05:18 【问题描述】：寻求有关 IE8 布局问题的帮助。完全披露，我更像是一名后端开发人员，我的 CSS 和 html 技能有点生疏，所以我编写的代码很可能只是糟糕或/或错误:)
我有一系列包含超链接的 div。超链接包含两个 div，为超链接内的文本提供样式。我看到的问题是，在 Chrome、FF 和 IE > 8 中，此超链接内的文本看起来不错，但在 IE 8 中，超链接内的文本的垂直对齐是关闭的，它看起来比它应该的要低一些。我几乎用尽了我有限的 HTML/CSS 技能来试图做到这一点，所以我希望有人对我需要做些什么来让这件事在 IE8 中看起来正确。
HTML：
<div class="report-description-container report-description-container-left">
<div class="report-title">
<img src="1x1_transparent.png" class="arrow"/>
Report Name
</div>
<div class="report-description">
[Description goes here]
<div class="report-generate-button-container">
<a href="/Report/DataExtract"><div class="report-link">Start my </div><div class="report-link-black">Report now</div></a>
</div>
</div>
</div>
CSS：
.report-description
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
height: auto;
padding: 10px;
font-size: 12px;
.report-generate-button-container
margin-top: 30px;
font-size: 16px;
background-image: url("sprite.png");
background-repeat: no-repeat;
background-position: 0px -80px;
height: 40px;
-moz-background-size: 100%;
-o-background-size: 100%;
-webkit-background-size: 100%;
background-size: 100%;
.report-link
display: inline-block;
text-decoration: none;
color: #000000;
font-weight: bold;
padding-left: 25px;
padding-top: 13px;
.report-link-black
display: inline-block;
text-decoration: none;
color: #1e90ff;
font-weight: bold;
padding-top: 13px;
.report-description-container
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
height: 200px;
display: inline-table;
width: 456px;
margin-bottom: 10px;
border: 1px solid;
border-color: #000000;
background-color: #eaeaea;
-webkit-box-shadow: 3px 3px 5px #888888;
box-shadow: 3px 3px 5px #888888;
.report-description-container-left
margin-right: 20px;
img.arrow
width: 32px;
height: 32px;
background: url("1x1_transparent.png") 0 0;
最后是几张截图：
页面在 Chrome、IE10、FF 等中的外观...
页面在 IE8 中的样子...
【问题讨论】：
首先：不能将块元素放入内联元素！！！ @wintercounter 如果您的意思是在锚标签中使用 div，由于 HTML5 规范，这是允许的。锚标记可以包含 流内容 元素。 【参考方案1】：我不知道这是否有帮助但是，这里有两点：
1) 要让它在 IE8 上运行，首先需要声明一个 DOCTYPE，无论是 HTML5 版本 <!DOCTYPE html> 还是 XHTML1.0 版本，例如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
此外，为了确保 IE8 未在兼容性视图上运行，最好在 <head> 部分中使用以下元数据：
<meta http-equiv="X-UA-Compatible" content="IE=edge">
2) IE8 不支持background-size 属性。但是如果你不使用精灵图像，有一个可能的解决方法：
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
【讨论】：
Hashem - 感谢您的回复。我已经有了 HTML5 文档类型，但没有 X-UA-Compatible 元标记。添加后，一切正常。 +1！我也错过了元数据！我一放进去，IE8就开始正常运行了！谢谢！【参考方案2】：试试看
HTML
<a href="/Report/DataExtract">Start my <span>Report now</span></a>
CSS
.report-generate-button-container
...
...
color: #000000;
font-weight: bold;
padding-left: 25px;
padding-top: 13px;
.report-generate-button-container span
color: #1e90ff;
【讨论】：
【参考方案3】：尝试将 css 更改为
.report-link
display: inline-block;
【讨论】：
其实我已经把它设置为inline-block，我发布的代码不是最新的。我已经更新了它。不过感谢您的回复！以上是关于IE8 div对齐问题的主要内容，如果未能解决你的问题，请参考以下文章