3

我对让我的表格在不同的浏览器上看起来正确而疯狂，就在我认为我进入一个时，它在另一个中改变了。IE7/8 和 Firefox 是我的目标浏览器。

有人可以看看我只是无法弄清楚问题所在的代码。表是由 Javascript 生成的，我需要它具有 220px 的固定宽度，主要问题是 tfoot，我有 3 个 tds，我在控制宽度时遇到了问题。

这是代码的相关部分：

<table class="favouritelinks"  cellspacing="0" cellpadding="0" width="220" >

<thead>
    <tr><td colspan="3">Your Favourite Links</td></tr>
</thead>
<tbody id="tulemused" ></tbody>


    <tr>
        <td width="50">Name</td><td><input type="text" id="key" name="key" value="" /></td>
        <td rowspan="2"><a href="javascript:insert_value()"><div class="addimg"></div></a></td>
    </tr>
    <tr>
        <td width="50">URL</td><td><input type="text" id="val" name="val" value=""  /></td>

    </tr>


</table>

和CSS：

.favouritelinks td{
                height: 20px;
                padding: 3px;

                border-bottom: 1px solid white;
                word-break: break-all;


            }
            .favouritelinks td a{
                color: white;
                text-decoration: none;


            }
            thead{
                background: url(img/title5.png) no-repeat;
                color: #444;
                font: bold 16px Helvetica;
                text-shadow: 0 1px 0 #FFF;
                text-align: center;
                width: 220px;
                height: 36px;


            }
            thead tr {
                height: 36px;

            }
            .container{
                width: 220px;
                margin-top: 105px;
                margin-left: 10px;


            }
            .delimg {

                background: url(img/details_close.png) no-repeat;
                width: 20px;
                height: 20px;
                float: right;
            }
            .addimg {
                background: url(img/details_open.png) no-repeat;
                width: 20px;
                height: 20px;
                float: right;
            }
            .urls {
                display: none;

            }

我究竟做错了什么？

图片http://imageshack.us/photo/my-images/38/56751263.jpg/

4

3 回答 3

6

在你的 CSS 中试试这个：

table {
    table-layout: fixed;
}
于 2012-05-01T11:06:39.227 回答
1

从CSS 中的.favouritelinks td中删除padding:3px，一切都会好起来的。

或者更好的方式

在 CSS 中而不是在 HTML 中设置 td 宽度

于 2012-05-01T11:16:31.700 回答
0

I had the same problem with layout good in IE9+, but bad in IE 7/8. I found out "colspan" was the problem when this column is wider then the sum of other matching columns not colspan on other rows. I was specifiying fixed width on all columns except the one I want to be adjusted with the remaining width. But that didn't work on IE 7/8. So I end up splitting rows on different "table" to workaround that layout problem.

于 2016-05-11T14:13:26.560 回答