Question

边框和td边框在Firefox中没有对齐但是它们在chrome中。我希望我的桌子能够完美地结合在一起，这就是为什么我有硬编码的宽度和所有东西，但firefox没有认识到它。另外我可以看到inspect元素中指定的宽度与我在两个浏览器中提供的宽度不同。在铬合金中它没关系，但是火狐根本没有帮助我。提前谢谢。

<!DOCTYPE html>
	<head>
	<style type="text/css">
		th,td{
	border-right:2px solid blue;
	border-bottom: 2px solid blue;
		}
	</style>
	</head>
	<body>
	<table id="example3" style="display:inline-block;"">
	    <thead style="background-color: wheat">
	    <tr>
	        <th width="50px"><input style="float:left" type="checkbox"></th>
	        <th width="180px">Model</th>
	        <th width="180px">Color</th>
	        <th width="180px">Year</th>
	    </tr>
	    </thead>
	    <tbody style="display:inline-block;overflow-x:hidden;overflow-
         y:auto;height:100px;">
	    <tr><td width="50px"><input type="checkbox"></td><td width="180px">
        <span><input type="text"></span></td><td width="180px"><input 
        type="text"></td><td width="180px"><span><input type="text"></span></td>
        </tr>
	    <tr><td width="50px"><input type="checkbox"></td><td width="180px">
        <span><input type="text"></span></td><td width="180px"><input 
        type="text"></td><td width="180px"><span><input type="text"></span></td>
        </tr>
	    <tr><td width="50px"><input type="checkbox"></td><td width="180px">
        <span><input type="text"></span></td><td width="180px"><input 
        type="text"></td><td width="180px"><span><input type="text"></span></td>
        </tr>
	    <tr><td width="50px"><input type="checkbox"></td><td width="180px">
        <span><input type="text"></span></td><td width="180px"><input 
        type="text"></td><td width="180px"><span><input type="text"></span></td>
        </tr>
	    <tr><td width="50px"><input type="checkbox"></td><td width="180px">
        <span><input type="text"></span></td><td width="180px"><input 
        type="text"></td><td width="180px"><span><input type="text"></span>
        </td></tr>
	    <tr><td width="50px"><input type="checkbox"></td><td width="180px">
        <span><input type="text"></span></td><td width="180px"><input 
        type="text"></td><td width="180px"><span><input type="text"></span></td>
        </tr>
	    <tr><td width="50px"><input type="checkbox"></td><td width="180px">
        <span>
        <input type="text"></span></td><td width="180px"><input type="text">
        </td><td width="180px"><span><input type="text"></span></td></tr>
	    <tr><td width="50px"><input type="checkbox"></td><td width="180px">
        <span>
        <input type="text"></span></td><td width="180px"><input type="text">
        </td><td width="180px"><span><input type="text"></span></td></tr>
	    </tbody>

	    </table>
	    <input type="button" id="add" value="add">
	    </body>
	    </html>

Answer 1

添加以下CSS。

th, td{
    box-sizing: border-box;
}

看起来边框会导致宽度增加。

如果不将此CSS属性添加到元素，边框将始终增加它的大小。

firefox没有为我的表格标题呈现正确的宽度

1 个答案: