我有一个特定大小的div中的html表.我希望桌子应用边距折叠并且100％宽.这是我的代码.它在IE8中呈现我想要的样子,在Firefox中呈现不正确. Firefox可能正确地做了规范,但无论如何.如何修复我的CSS以在两个浏览器中工作？
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Untitled 1</title> <style type="text/css"> table { border-collapse: collapse; border-spacing: 0; } table { margin: 10px 0; width: 100%; display: block; } p { margin: 10px 0; } td,th { border: 1px solid #000000; } </style> </head> <body> <div style="width: 600px; border: 1px purple solid;"> <p>Some text at the top. Notice that the margin collapse does not work unless display:block.</p> <table> <tr> <th></th> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>Label 1</td> <td>1.A</td> <td>1.B</td> <td>1.c</td> </tr> <tr> <td>Label 2</td> <td>2.A</td> <td>2.B</td> <td>2.c</td> </tr> </table> <p>Some text at the bottom. Notice that the margin collapse does not work unless display:block. Its stupid.</p> </div> </body> </html>
我需要显示：阻止边缘折叠阻止在Firefox中工作.如果你删除display：block,你应该注意到< p>之间的间距.标签从10px扩展到20px.
这也是我之前发布的this问题的编辑,但由于某种原因它不会让我编辑.我一直在乱搞我的互联网缓存,所以我可能弄乱了一个cookie.
解决方法
你需要添加table-layout：固定到分配给表的样式,这就是全部.
