Internet explorer 背景-IE问题（与其他浏览器一起使用）_Internet Explorer_Browser_Background

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

internet-explorer browser

Internet explorer 背景-IE问题（与其他浏览器一起使用）,internet-explorer,browser,background,Internet Explorer,Browser,Background,我有下面的页面，它在除IE以外的所有浏览器上都能正常工作。 IE上的问题是第二个maincontent/letcol分区的背景混乱。知道为什么它不适合页面的其余部分吗非常感谢 <!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.or

我有下面的页面，它在除IE以外的所有浏览器上都能正常工作。 IE上的问题是第二个maincontent/letcol分区的背景混乱。知道为什么它不适合页面的其余部分吗

非常感谢

<!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>


p、 h1，h2{
保证金：0；
填充：0
}
身体{
宽度：960px；
保证金：自动；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：12px；
背景：#CCC；
颜色：#666；
边缘底部：30px；
}
a、 a:参观了{
文字装饰：无；
字体大小：粗体；
颜色：#ff8000；
字体大小：粗体
}
a:悬停{
文本装饰：下划线
}
#主要内容#简介{
清除：左；
填充顶部：20px；
背景色：#ffffff；
填充：20px；
显示：块
}
#左撇子{
浮动：左；
宽度：360px；
右边填充：20px；
背景色：#ffffff
}
#rightcol{
浮动：左；
宽度：540px；
背景色：继承
}
#皮带{
填充底部：46px；
}
.台词{
浮动：左；
右边填充：20px；
右边距：20px；
右边框：1px#CCC实心
}
h1{
页边距底部：0；
字体大小：25px；
}
.第h2行{
颜色：#999；
字体大小：20px；
字体大小：正常；
边际上限：0；
页边距底部：0；
填充顶部：0；
文本对齐：左对齐
}
.第h3行{
颜色：#999；
字体大小：11px；
边际上限：0；
字体大小：正常
}
p{
边际上限：0；
填充顶部：0；
边缘底部：10px；
}
p、 李{
线高：17px；
}
引文{
浮动：对；
宽度：375px；
}
.引用{
颜色：#ff8000；
字体：斜体；
填充：10px；
文本对齐：右对齐；
左侧填充：80px；
}
.资讯图表{
背景：#ff8000；
文本对齐：居中；
填充：20px 10px 30px 10px；
}
氢{
文本对齐：居中；
颜色：#FFF；
文本转换：大写；
字号：17px；
}
.呼叫行动{
背景：#ff8000；
填充：10px；
边缘顶部：20px；
颜色：#FFF；
明确：两者皆有；
}
.calltoaction ul、.calltoaction li{列表样式：无；边距：0；填充：0}
李先生{
浮动：左；
字体大小：14px；填充：10px 15px 10px 0；
}
.标志{
清除：左；
浮动：右；边距：20px；
显示：块
}
.calltoaction a、.calltoaction a:已访问{
颜色：#FFF
}
.什么事{
清除：左；
浮动：左；
背景色：#e7e7e7；
填充：10px；
宽度：340px；
}
.什么事{
左侧填充：17px；
左边距：0px
}
.李先生呢{
左边距：0；
列表样式：外部url（'page%20build/dotOrange.png'）；
}
标题
标题
校长2
校长3
校长2
校长3
校长2
校长3
text文本文本
text文本文本
text文本
文本文本文本文本文本文本文本文本
文本文本文本文本文本文本
校长2
校长2

文本文本文本文本文本
文本文本文本文本
文本文本文本文本
文本文本文本文本
文本文本文本文本文本
文本文本文本文本

“文本”

作者
“文本文本文本文本文本文本文本
“

作者2
“文本文本文本文本文本文本文本
“

auhtor3




校长2

我认为您需要检查您的HTML，尤其是HTML标记末尾附近的列表项，您缺少了两个结束标记

此外，代码中的某些属性已过时且不具有语义，例如

，您可以通过CSS设置这些格式，尤其是您已经在使用它。

mmhh，看不到缺少的标记。你能说得更具体一点吗？第一个li

也是

你在图像和分机之间留了一个空格