Question

我有一个表格，可以在每个td元素中显示图片。该页面基本上是一个库。

在Firefox中，td元素内的每个图片周围都有一个小的（5px）边距（或填充？）。无论表中有多少张图片，边距都不会改变。 一切都很棒＆amp;我想要的是什么。

在IE中，td元素内的每个图片周围都有一个大的（40px）边距（或填充？）。当表格中有更多图片时，边距/填充更大。 这不是我想要的

在这两种情况下，每张照片大小相同（100px×100px），这就是我想要的。

如何确保IE在每张图片周围没有这些奇怪的边距？并且只是在每张图片周围保持恒定的5px边距？

我的代码：

<!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=utf-8" />
    <title>Kaz Early Learning Centre - Local Childcare - Dolans Bay NSW</title>

    <style type="text/css" media="all">

    </style>
</head>

<body>
    <div id="gallery" align="center">

        <table align="center">

            <tr> </tr> 
            <tr> 
                <td>
                    <a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0215_resized.JPG">
                        <img src="images/gallery/Open Day 2010/IMG_0215_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
                    </a>
                </td>
                <td>
                    <a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_2262_resized.JPG">
                        <img src="images/gallery/Open Day 2010/IMG_2262_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
                    </a>
                </td>
                <td>
                    <a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0223_resized.JPG">
                        <img src="images/gallery/Open Day 2010/IMG_0223_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
                    </a>
                </td>
            </tr> 
            <tr> 
                <td>
                    <a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0196_resized.JPG">
                        <img src="images/gallery/Open Day 2010/IMG_0196_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
                    </a>
                </td>
                <td>
                    <a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0223_resized.JPG">
                        <img src="images/gallery/Open Day 2010/IMG_0223_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
                    </a>
                </td>
                <td>
                    <a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0220_resized.JPG">
                        <img src="images/gallery/Open Day 2010/IMG_0220_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
                    </a>

                </td>
            </tr> 

            <tr> 
                <td>
                    <a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0196_resized.JPG">
                        <img src="images/gallery/Open Day 2010/IMG_0196_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
                    </a>
                </td>
                <td>
                    <a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0223_resized.JPG">
                        <img src="images/gallery/Open Day 2010/IMG_0223_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
                    </a>
                </td>
                <td>
                    <a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0220_resized.JPG">
                        <img src="images/gallery/Open Day 2010/IMG_0220_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
                    </a>

                </td>
            </tr> 

            <tr> 
                <td>
                    <a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0196_resized.JPG">
                        <img src="images/gallery/Open Day 2010/IMG_0196_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
                    </a>
                </td>
                <td>
                    <a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0223_resized.JPG">
                        <img src="images/gallery/Open Day 2010/IMG_0223_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
                    </a>
                </td>
                <td>
                    <a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0220_resized.JPG">
                        <img src="images/gallery/Open Day 2010/IMG_0220_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
                    </a>

                </td>
            </tr> 

            <tr>
                <td>
                    <a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0220_resized.JPG">
                        <img src="images/gallery/Open Day 2010/IMG_0220_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
                    </a>
                </td>   
                <td>
                    <a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0196_resized.JPG">
                        <img src="images/gallery/Open Day 2010/IMG_0196_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
                    </a>
                </td>
            </tr>

        </table>
    </div>

</body>

</html>

Answer 1

不同的浏览器对设置使用不同的默认设置，尽管我不希望它有所不同。您可以尝试使用全局重置文件进行CSS设置。您可以找到示例here。

Answer 2

尝试摆脱表达式，如果你正在查看，即7 + this解释他们摆脱了表达支持，有利于实际修复他们糟糕的CSS处理

Answer 3

不同的浏览器对这些内容有不同的默认值。如果您想控制填充，边框等，请在table definition中指定它们，或使用CSS

<style>
   .my_table {
       padding: 0px;
       margin: 0px;
       border: 0px;
   }
</style>
<table class="my_table">

Answer 4

您的代码中有很多内容：

你应该使用像这样的CSS重置：http://developer.yahoo.com/yui/3/cssreset/。这将重置所有浏览器以使用相同的CSS设置狐狸盒模型（填充/边距/等）到标准值。每个浏览器都可以默认这些默认设置 - 即使在浏览器版本之间也是如此。
为什么使用CSS表达式和内联CSS？您可以使用Javascript实现相同的功能，并且它更符合跨浏览器标准。您的内联CSS也很难覆盖，因为它位于标记的样式属性中。
- ＃1应该可以解决您的问题。＃2只是最佳做法。

Answer 5

您也可以使用normalize.css。它像重置css一样工作。

您可以在此处找到它：http://necolas.github.com/normalize.css/

希望有所帮助！

Answer 6

很难在没有看到你的CSS的情况下告诉你发生了什么。

但是，如果要控制表格的填充/边距，则应首先重置表格中的所有内容。

因此，请为表格提供ID或类名<table class="imagesTable">

然后在样式表中按如下方式重置CSS：

table.imagesTable tr td, table.imagesTable tr td a, table.imagesTable tr td a img  {
    padding:0;
    margin:0;
    border:0;
}

这是针对表格单元格中的所有三个元素。您可能还想重置tr，但这可能不是必需的。

您可能需要将!important添加到样式规则中，以覆盖可能应用的其他一些样式。

完成后，您可以向td

添加一些不错的填充

table.imagesTable tr td {
    padding:5px;
}

为什么表格在IE中的边界比FireFox大

6 个答案: