0

我编写了以下设计

CSS

#content1{
top:0;
width: 300px;
height: 250px;

}

#content2{
width: 300px;
height: 250px;

}

#content3{
width: 300px;
height: 250px;

}

#bottom{
width: 300px;
height: 75px;

}

代码

<td width="300" valign="top" style="height:100%;">


      <table border="0" align="center" cellpadding="0" cellspacing="0"  height="100%">
       <tr>  
        <td valign="top">
         <div id="content1>/*****Content1****/</div>
        </td>
       </tr>
       <tr>
        <td valign="middle">
         <div id="content2/*****Content2****/</div>
        </td>
      </tr>
      <tr>
       <td valign="middle">
        <div id="content3/*****Content3****/</div>
       </td>
      </tr>
      <tr>
       <td valign="bottom">
        <div id="bottom/*****Content4****/</div>
       </td>
     </tr>
    </table>

 </td>

你可以在这里看到这个工作 http://www.spoiledagent.com/about_karu1.html

它运行得很好，因为我希望它在浏览器 IE 和 Mozilla 上具有相同的边距，但在任何其他浏览器（如 Safari、Chrome 等）中看起来并不好。所有块看起来都粘在一起。

我们如何使它在所有浏览器上看起来都像在 IE 上一样

谢谢

4

2 回答 2

1

给你的桌子一个 id 并使用这个 css。

#tableid
{
border-collapse:separate;
border-spacing:0 20px;
}

检查此小提琴
有关更多信息，请阅读此

于 2013-05-01T09:48:40.880 回答
-1

你为什么不把它们放到一个列表中?

这是给你的小小提琴

于 2013-05-01T11:02:08.720 回答