Question

在IE8中寻找布局问题的一些帮助。完全披露，我更像是一个后端开发人员，我的CSS＆amp; HTML技能有点生疏，所以很有可能我把这些代码放在一起只是简单的错误或者错误：）

我有一系列包含超链接的div。超链接包含两个div，以便为超链接内的文本提供样式。我看到的问题是在Chrome，FF和IE中＆gt; 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&nbsp;</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等页面的内容......

Screenshot

IE8中的页面是什么样的......

Screenshot

Answer 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')";

Answer 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;
}

Answer 3

尝试将css更改为

.report-link {
    display: inline-block;

IE8 div对齐问题

3 个答案: