Question

我有以下页面在IE浏览器的每个浏览器上都能正常运行。 IE上的问题是第二个maincontent / letcol div上混乱的背景。知道为什么它不适合页面的其他部分吗？

非常感谢！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<style type="text/css">
p, h1, h2 {
    margin:0;
    padding:0
}
body {
    width:960px;
    margin:auto;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    background:#CCC;
    color:#666;
    margin-bottom: 30px;
}
a, a:visited {
    text-decoration:none;
    font-weight:bold;
    color:#ff8000;
    font-weight:bold
}
a:hover {
    text-decoration:underline
}
#maincontent, #intro {
    clear:left;
    padding-top:20px;
    background-color:#ffffff;
    padding:20px;
    display:block
}
#leftcol {
    float:left;
    width:360px;
    padding-right:20px;
    background-color:#ffffff
}
#rightcol {
    float:left;
    width:540px;
    background-color:inherit
}
#strap {
    padding-bottom:46px;
}
.lines {
    float:left;
    padding-right:20px;
    margin-right:20px;
    border-right:1px #CCC solid
}
h1 {
    margin-bottom:0;
    font-size: 25px;
}
.lines h2 {
    color:#999;
    font-size:20px;
    font-weight:normal;
    margin-top:0;
    margin-bottom:0;
    padding-top:0;
    text-align:left
}
.lines h3 {
    color: #999;
    font-size:11px;
    margin-top:0;
    font-weight:normal
}
p {
    margin-top:0;
    padding-top:0;
    margin-bottom:10px;
}
p, li {
    line-height:17px;
}
.quoteArea {
    float:right;
    width:375px;
}
.quote {
    color:#ff8000;
    font-style:italic;
    padding:10px;
    text-align:right;
    padding-left: 80px;
}
.infographic {
    background:#ff8000;
    text-align:center;
    padding:20px 10px 30px 10px;
}
h2 {
    text-align:center;
    color:#FFF;
    text-transform:uppercase;
    font-size:17px;
}
.calltoaction {
    background:#ff8000;
    padding:10px;
    margin-top:20px;
    color:#FFF;
    clear:both;

}
.calltoaction ul, .calltoaction li{ list-style:none; margin:0; padding:0}

.calltoaction li {
    float:left;
    font-size:14px;padding:10px 15px 10px 0; 
}

.logos {
    clear:left;
    float:right;margin:20px;
    display:block
}
.calltoaction a, .calltoaction a:visited{
    color:#FFF
}
.whatwecando {
    clear:left;
    float:left;
    background-color:#e7e7e7;
    padding:10px;
    width:340px;
}
.whatwecando ul {
    padding-left:17px;
    margin-left:0px
}
.whatwecando li {
    margin-left:0;
    list-style:url('page%20build/dotOrange.png') outside;
}
</style>
<title>TITLE</title>
</head>

<body>
<div id="intro">
  <h1>header</h1>
  <div id="strap">
    <div class="lines">
      <h2>header2</h2>
      <h3>header3</h3>
    </div>
    <div class="lines">
      <h2>header2</h2>
      <h3>header3</h3>
    </div>
    <div class="lines">
      <h2>header2</h2>
      <h3>header3</h3>
    </div>
  </div>
</div>
<div id="maincontent">
  <div id="leftcol">
    <p><strong>TextTextTextTextTextTextTextTextTextTextTextTextTextTextText</strong></p>
    <p><strong>TextTextTextTextTextTextTextTextTextTextTextTextText</strong></p>
    <p><strong>TextTextTextTextTextTextTextTextText</strong></p>
    <p>TextTextTextTextTextTextTextTextTextTextTextTextText</p>
    <p>TextTextTextTextTextTextTextText</p>
  </div>
  <div id="rightcol">
    <div class="infographic">
      <h2>header2</h2>
      <img src="test.png" width="515" height="485" alt="Ialt" /> </div>
  </div>
  <div class="whatwecando">
    <h2>header2</h2>
    <ul>
      <li>TextTextTextTextTextTextText</li>
      <li>TextTextTextTextText</li>
      <li>TextTextTextTextTextText</li>
      <li>TextTextTextTextTextText</li>
      <li>TextTextTextTextTextTextText</li>
      <li>TextTextTextTextTextText</li>

    </ul>
  </div>
  <div class="quoteArea">
    <div class="quote">
      <p>&quot; TextTextTextTextTextTextTextText &quot;<br />
        <span style="color:#666; font-style:normal">author</span></p>
    </div>
    <div class="quote">
      <p>&quot; TextTextTextTextTextTextTextTextTextText
        &quot;<br />
        <span style="color:#666; font-style:normal">author2</span></p>
    </div>
    <div class="quote">
      <p>&quot;TextTextTextTextTextTextTextTextTextTextText
        &quot;<br />
        <span style="color:#666; font-style:normal">auhtor3</span></p>
    </div><br clear="all"/>
  <img src="page build/spacer.gif" width="1" height="1" alt="spacer" style="clear:left"/>
  </div>
  <br clear="all"/>
  <img src="page build/spacer.gif" width="1" height="1" alt="spacer" style="clear:left"/>
  <div class="calltoaction">
    <h2 style="text-align:left">header2</h2>
    <ul>
      <li><img src="image.png" width="16" height="16" alt="Valt" align="left" />&nbsp;&nbsp;<a href="http://www.url.co.uk</a></li>
      <li><img src="page .png" width="16" height="16" alt="Email us" align="left"  />&nbsp;&nbsp;<a href="mailto:mailto.com</a></li>
      <li style="width:150px"><img src="page img.png" width="16" height="16" alt="Phone us" align="left"  />&nbsp;&nbsp;0207 393 7330</li>
    </ul>  <br clear="all"/>
  <img src="page build/spacer.gif" width="1" height="1" alt="spacer" style="clear:left"/>
  </div>
  <img src="page build/spacer.gif" width="1" height="1" alt="spacer" style="clear:left"/>
  <div class="logos"><a href="http://www.logo.com"><img src="paglogo.png" alt="altt" width="173" height="56" border="0" /></a></div>
  <br clear="all"/>
  <img src="build.gif" width="1" height="1" alt="spacer" style="clear:left"/></div>
</body>
</html>

Answer 1

我认为你需要检查你的HTML，特别是html标记末尾附近的列表项，你错过了几个结束标记。

此外，代码中的某些属性已过时且不具有<br clear="all"/>等语义属性，您可以通过CSS设置大部分格式，尤其是您已经使用过它。

背景 - IE问题（与其他所有浏览器一起使用）

1 个答案: