0

I am having a problem with a table, it's showing lines in the table even though no border is set and it is set to 0. The Gyazo.com link and the code is below.

http://gyazo.com/661ce70e62c77e882f85b02c4d330316 (screenshot of page)

<style type="text/css"><!--
table.affs td { background-color: white; margin: 12px 12px 12px 12px; padding: 25px 25px 25px 25px; } table.affs { border-collapse: separate; border-spacing: 10px; *border-collapse: expression('separate', cellSpacing = '15px'); }
--></style>
<table class="affs" style="background-color: #ffffff;" width="700px" border="0" cellspacing="2">
<tbody>
<tr>
<td><a href="http://www.kia.com" target="_blank"><img alt="" src="http://www.squareone.co/images/affiliates/kia.PNG" /></a></td>
<td><a href="http://www.google.com" target="_blank"><img alt="" src="http://www.squareone.co/images/affiliates/google.png" /></a></td>
<td><a href="http://www.youtube.com" target="_blank"><img alt="" src="http://www.squareone.co/images/affiliates/youtube.png" /></a></td>
<td><a href="http://www.nike.com" target="_blank"><img alt="" src="http://www.squareone.co/images/affiliates/nike.png" /></a></td>
</tr>

<tr>
<td><a href="http://www.jaguarpc.com" target="_blank"><img alt="" src="http://www.squareone.co/images/affiliates/jagpc.png" /></a></td>
<td><a href="http://www.duxter.com" target="_blank"><img alt="" src="http://www.squareone.co/images/affiliates/duxter.png" /></a></td>
<td><a href="http://www.sixpackshortcuts.com" target="_blank"><img alt="" src="http://www.squareone.co/images/affiliates/sps.png" /></a></td>
<td><img src="http://www.squareone.co/images/affiliates/baeza-grey.png" href="" /></td>
</tr>

<tr>
<td><img src="http://www.squareone.co/images/affiliates/dani.png" href="" /></td>
<td><img src="http://www.squareone.co/images/affiliates/roton-grey.png" href="" /></td>
<td><img src="http://www.squareone.co/images/affiliates/talib-grey.png" href="" /></td>
</tr>
</tbody>
</table>

I'm currently using the latest version of Chrome on Windows 7 and 8, I have also tried it on IE 9 and Ten on Windows 7 and 8, respectively. I have also tested it on Mac OS X Lion in Safari & Chrome. Not sure why it's doing it.

4

1 回答 1

0

您的示例不<table>用于表格数据，而是用于布局。这通常会导致布局问题，因为表格格式化的确切规则取决于实现。您的示例是 CSS 浮动的一个很好的示例，因为如果您添加另一张图片，它仍然可以工作。它是这样工作的：

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    #container {overflow: hidden; width: 300px; padding: 0;}
    .element {height: 100px; width: 100px; float: left; padding: 0; margin: 0;}
    </style>
</head>
<body>
    <div id="container">
        <div class="element" style="background-color: #f00;">1</div>
        <div class="element" style="background-color: #ff0;">2</div>
        <div class="element" style="background-color: #f0f;">3</div>
        <div class="element" style="background-color: #0f0;">4</div>
        <div class="element" style="background-color: #0ff;">5</div>
        <div class="element" style="background-color: #00f;">6</div>
    </div>
</body>
</html>

如果你觉得勇敢，你也可以尝试 CSS3 表格，但这还没有像 float 那样广泛实施。它在语义上更正确，但仍然有许多表被滥用于其他东西的缺点。

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    #container { display: table; }
    .line { display: table-row; }
    .element { display: table-cell; height: 100px; width: 100px;}
    </style>
</head>
<body>
    <div id="container">
        <div class="line">
            <div class="element" style="background-color: #f00;">1</div>
            <div class="element" style="background-color: #ff0;">2</div>
            <div class="element" style="background-color: #f0f;">3</div>
        </div>
        <div class="line">
            <div class="element" style="background-color: #0f0;">4</div>
            <div class="element" style="background-color: #0ff;">5</div>
            <div class="element" style="background-color: #00f;">6</div>
        </div>
    </div>
</body>
</html>

如果这也无济于事，请检查您的 chrome 开发人员工具是否有不需要的边框或背景从一些边缘闪烁。

于 2013-05-04T21:39:06.680 回答