gpt4 book ai didi

css - 不同浏览器中的单元格背景/边框未对齐

转载 作者:太空宇宙 更新时间:2023-11-04 05:23:53 25 4
gpt4 key购买 nike

我用 CSS 和图形开发了一个漂亮的表格框架。它为 3D 标题使用背景图像切片,为行使用简单的 css 边框。

问题是我需要将边框与标题对齐,但它在不同的浏览器中无法一致地工作,尽管我不明白为什么不可以。

在 IE6 和 IE7 中它工作正常

在 IE8 和 FF3.5 中,左边缘超出一个像素

在 Chrome 10 中,右边缘超出了一个像素

背景图像似乎没有完全放置在标题单元格的边缘,但很难知道应该归咎于哪个浏览器。任何建议表示赞赏。

该问题的现场演示位于: http://www.songtricks.com/TableBug.html

HTML/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>
<style type="text/css">

table.demo
{
margin:0px;
padding:0px;
border-collapse:collapse;
}
table.demo tr
{
padding:0px;
border:none 0px transparent;
}

table.demo th
{
border:none 0px transparent;
border-bottom:solid 1px #cccccc;
padding:10px;
background:url(wfx_table_tm.gif) repeat-x left top;
}
table.demo th.left
{
padding:0px;
background:url(wfx_table_tl.gif) no-repeat left top;
}
table.demo th.right
{
padding:0;
background:url(wfx_table_tr.gif) no-repeat right top;
}

table.demo td
{
border:none 0px transparent;
border-right:solid 1px #dfdfdf;
border-bottom:solid 1px #cccccc;
padding:8px;
}
table.demo td.left
{
border-left:solid 1px #b1b1b1;
}
table.demo td.right
{
border-right:solid 1px #b1b1b1;
}

</style>
</head>

<body>
<table class="demo">
<tr>
<th class="left">Left</th>
<th>Center</th>
<th class="right">Right</th>
</tr><tr>
<td class="left">Left</td>
<td>Center</td>
<td class="right">Right</td>
</tr>
</table>
</body>
</html>

最佳答案

table.demo 级别尝试使用 border-spacing:0 而不是 border-collapse:collapse

如果它破坏了 ie6/7,那么您可以在条件 CSS 引用中包含 border-collapse。

关于css - 不同浏览器中的单元格背景/边框未对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5723560/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com