Question

表格内容设置为100％的问题在Safari中没有正确呈现（各种奇怪的大小调整），然后是Firefox（溢出边缘）。

有没有办法可以将它设置为显示宽度：TD中的Firefox为100％，使用CSS的最大宽度为100％：使用Inspect Element手动设置时，这似乎可以解决这个问题。 / p>

在谷歌搜索问题后，表格100％宽度问题确实对Safari和Firefox浏览器有问题。

可以为元素设置max-width：100％AND width：100％吗？

 <table align="center" border="0" cellpadding="1" cellspacing="1"    style="width:100%">
 <tbody>
 <tr>
 <td><a href="link1"><img src="pic1.jpg" style="border-style:solid; border- width:10px; float:left; max-height:240px; max-width:96%" ></a></td>
 <td><a href="link2"><img src="pic2.jpg" style="border-style:solid; border-width:10px; float:left; max-height:240px; max-width:96%" ></a></td>
 </tr>
 </tbody>
 </table>

Answer 1

免责声明：我在这里没有Safari，但我可以通过Mozilla，Chrome和IE中的代码相同的方式解决问题。希望有所帮助！

表用于显示数据。那就是他们的设计目标;这是他们擅长的。所以他们的设计范例之一就是他们不会隐藏东西;如果宽度太窄而无法显示所有内容，他们会忽略宽度规则并显示所有内容。

考虑到这一点，看看Mozilla会发生什么。如果你有两个并排的图像，它们一起比窗口的宽度宽，那么表格会忽略它的width:100%规则，只是显示图像，无论如何，即使以水平滚动条为代价。

那么，你能做什么;你可以省去桌子，只是并排显示图像。使a元素宽50％，就像表格单元格一样。

＆＃13;

a {
  float:left;
  width:50%;
}
a img {
  border-style:solid;
  border-width:10px;
  max-height:240px;
  box-sizing:border-box; /* to account for the border */
  max-width:100%;
}

＆＃13;

<a href="link1"><img src="http://lorempixel.com/270/240"/></a>
<a href="link2"><img src="http://lorempixel.com/g/270/240"/></a>

＆＃13;

表100％宽度 - Firefox和＆amp;苹果浏览器

1 个答案: