0

寻求有关 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&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 等中的外观...

截屏

页面在 IE8 中的外观...

截屏

4

3 回答 3

2

我不知道这是否有帮助，但是，这里有两点：

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 未在Compatibility View上运行，最好在本<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')";
于 2013-08-27T21:21:43.767 回答
1

试试喜欢

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;
}
于 2013-08-27T21:11:42.417 回答
0

尝试将css更改为

.report-link {
    display: inline-block;
于 2013-08-27T20:38:41.607 回答