CSS - IE中的文本重叠。好吧在FF，但它只是不喜欢它

时间：2010-08-28 18:20:32

标签： css

所以这是一个简单的页面，我已经剥离到最低限度。在FF中看起来很棒，但我不能让它在IE中以相同的方式显示。我已经尝试了所有可能的配置（我认为）。也许有人可以告诉我我做错了什么。这可能是布局吗？ THX。

<!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=iso-8859-1" />
<title>work page</title>
<style type="text/css">
<!--
/* --- --- */
#wrapper {
    width:731px;
    margin-right: auto;
    margin-left: auto;
    background-color: #FFFFFF;
}
/* --- --- */
#wholepage {
    width: 674px;
    display: inline-table;
    margin-left: 28px;
}
#prefmatchbox {
    width: 600px;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 30px;
}
.titlecenter {
    padding-top: 2px;
    padding-bottom: 3px;
    font-size: 15px;
    font-weight: bold;
    text-transform: capitalize;
    text-align: center;
    width: 100%;
    border: 2px outset #333333;
    display: inline-table;
}
.box {

}
.left {
    text-align: center;
    padding-top: 2px;
    padding-bottom: 2px;
    display: inline-table;
    width: 200px;
    margin-left: 25px;
}
.center {
    text-transform: capitalize;
    padding-top: 2px;
    padding-bottom: 2px;
    text-align: center;
    display: inline-table;
    width: 150px;
}
.right {
    text-align: center;
    padding-top: 2px;
    padding-bottom: 2px;
    display: inline-table;
    width: 200px;
}

-->
</style>
</head>
<body>
<div id="wrapper">
  <div id="wholepage">
    <div id="prefmatchbox">
      <div class="titlecenter">food</div>
      <div class="box">
        <div class="left">peaches<br />
        </div>
        <div class="center">fruit</div>
        <div class="right">plums<br />
        </div>
      </div>
      <div class="box">
        <div class="left">lettuce<br />
        </div>
        <div class="center">vege's</div>
        <div class="right">carrots<br />
        </div>
      </div>
      <div class="box">
        <div class="left">wheat<br />
        </div>
        <div class="center">bread</div>
        <div class="right">white<br />
        </div>
      </div>
      <div class="box">
        <div class="left">gum drops<br />
        </div>
        <div class="center">candy</div>
        <div class="right">chocolate<br />
        </div>
      </div>
      <div class="box">
        <div class="left">water<br />
        </div>
        <div class="center">drink</div>
        <div class="right">juice<br />
        </div>
      </div>
      <div class="titlecenter">plants</div>
      <div class="box">
        <div class="left">weed grass<br />
        </div>
        <div class="center">weeds</div>
        <div class="right">some other weed<br />
        </div>
      </div>
      <div class="box">
        <div class="left">maple<br />
        </div>
        <div class="center">tress</div>
        <div class="right">fir<br />
        </div>
      </div>
      <div class="box">
        <div class="left">Rose bud<br />
          flourance<br />
          galaxy bloom<br />
        </div>
        <div class="center">flowers</div>
        <div class="right">blah<br />
          Rose<br />
          Humperdinkle<br />
          greedy lane<br />
        </div>
      </div>
      <div class="titlecenter">cars</div>
      <div class="box">
        <div class="left">porsche<br />
        </div>
        <div class="center">fast</div>
        <div class="right">lamborghini<br />
        </div>
      </div>
      <div class="box">
        <div class="left">explorer<br />
        </div>
        <div class="center">big</div>
        <div class="right">suburban<br />
        </div>
      </div>
      <div class="box">
        <div class="left">mercedes<br />
        </div>
        <div class="center">slow</div>
        <div class="right">honda<br />
        </div>
      </div>
      <div class="titlecenter">movies</div>
      <div class="box">
        <div class="left">iron man 2<br />
        </div>
        <div class="center">action</div>
        <div class="right">kick ass<br />
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

<小时/> 已编辑代表OP添加指向jsbin.com demo的链接。

2 个答案:

答案 0 :(得分：0)

你可以使用float而不是inline-block，如：

<!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=iso-8859-1" /> 
<title>work page</title> 
<style type="text/css"> 
<!--
/* --- --- */
#wrapper {
    width:731px;
    margin-right: auto;
    margin-left: auto;
    background-color: #FFFFFF;
}
/* --- --- */
#wholepage {
    width: 674px;
    display: inline-table;
    margin-left: 28px;
}
#prefmatchbox {
    width: 600px;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 30px;
}
.titlecenter {
    padding-top: 2px;
    padding-bottom: 3px;
    font-size: 15px;
    font-weight: bold;
    text-transform: capitalize;
    text-align: center;
    width: 100%;
    border: 2px outset #333333;
    display: inline-table;
}
.box {
 padding: 0 25px;
}
.left {
    text-align: center;
    padding-top: 2px;
    padding-bottom: 2px;
    width: 200px;
    float:left;
}
.center {
    text-transform: capitalize;
    padding-top: 2px;
    float:left;
    padding-bottom: 2px;
    text-align: center;
    width: 150px;
}
.right {
    text-align: center;
    padding-top: 2px;
    float:right;
    padding-bottom: 2px;
    width: 200px;
}

-->
</style> 
</head> 
<body> 
<div id="wrapper"> 
  <div id="wholepage"> 
    <div id="prefmatchbox"> 
      <div class="titlecenter">food</div> 
      <div class="box"> 
        <div class="left">peaches<br /> </div> 
        <div class="center">fruit</div> 
        <div class="right">plums<br />
        </div> 
        <br clear="all" />
      </div> 
      <div class="box"> 
        <div class="left">lettuce<br /> 
        </div> 
        <div class="center">vege's</div> 
        <div class="right">carrots<br /> 
        </div>
         <br clear="all" /> 
      </div> 
      <div class="box"> 
        <div class="left">wheat<br /> 
        </div> 
        <div class="center">bread</div> 
        <div class="right">white<br /> 
        </div> 
         <br clear="all" />
      </div> 
      <div class="box"> 
        <div class="left">gum drops<br /> 
        </div> 
        <div class="center">candy</div> 
        <div class="right">chocolate<br /> 
        </div> 
         <br clear="all" />
      </div> 
      <div class="box"> 
        <div class="left">water<br /> 
        </div> 
        <div class="center">drink</div> 
        <div class="right">juice<br /> 
        </div> 
         <br clear="all" />
      </div> 
      <div class="titlecenter">plants</div> 
      <div class="box"> 
        <div class="left">weed grass<br /> 
        </div> 
        <div class="center">weeds</div> 
        <div class="right">some other weed<br /> 
        </div> 
         <br clear="all" />
      </div> 
      <div class="box"> 
        <div class="left">maple<br /> 
        </div> 
        <div class="center">tress</div> 
        <div class="right">fir<br /> 
        </div> 
         <br clear="all" />
      </div> 
      <div class="box"> 
        <div class="left">Rose bud<br /> 
          flourance<br /> 
          galaxy bloom<br /> 
        </div> 
        <div class="center">flowers</div> 
        <div class="right">blah<br /> 
          Rose<br /> 
          Humperdinkle<br /> 
          greedy lane<br /> 
        </div> 
         <br clear="all" />
      </div> 
      <div class="titlecenter">cars</div> 
      <div class="box"> 
        <div class="left">porsche<br /> 
        </div> 
        <div class="center">fast</div> 
        <div class="right">lamborghini<br /> 
        </div> 
         <br clear="all" />
      </div> 
      <div class="box"> 
        <div class="left">explorer<br /> 
        </div> 
        <div class="center">big</div> 
        <div class="right">suburban<br /> 
        </div> 
         <br clear="all" />
      </div> 
      <div class="box"> 
        <div class="left">mercedes<br /> 
        </div> 
        <div class="center">slow</div> 
        <div class="right">honda<br /> 
        </div> 
         <br clear="all" />
      </div> 
      <div class="titlecenter">movies</div> 
      <div class="box"> 
        <div class="left">iron man 2<br /> 
        </div> 
        <div class="center">action</div> 
        <div class="right">kick ass<br /> 
        </div> 
         <br clear="all" />
      </div> 
    </div> 
  </div> 
</div> 
</body> 
</html>

答案 1 :(得分：0)

它在IE 8中运行良好.IE 7及更早版本不支持display:inline-table。

相关问题
最新问题