Question

我有以下代码，当屏幕宽度小于特定数字时，我希望单元格折叠。

通常情况下，我习惯了IE的问题，但在这种情况下，IE和Firefox都运行良好，Chrome就不会对我想做的事情做出反应。

有什么想法吗？

我的代码是：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
  @media screen and (max-width: 432px) {
    .dynTd {display: block;}
  }
</style>

</head>

  <table style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';font-size:12px;">
    <tr>
	  <td style="vertical-align: top">
		<img src="https://xxxxxxxxxx/ccccccc.jpg" width="95" height="85">
      </td>
      <td style="vertical-align: top; display: block;">
	    <span style="color:#eb6909;font-size:14px;"><b>Name Surname</b></span><br>
		  <div style="font-size: 5px;">&nbsp;</div>
		  <span>Title</span>
		  <div style="font-size: 10px;">&nbsp;</div>
			<span style="color:#eb6909;font-size:10px;">TEL</span> <span>+00 000000 000000</span><br>
			<span style="color:#eb6909;font-size:10px;">MOBILE</span> <span>+00 000000 000000</span><br>
			<span style="color:#eb6909;font-size:10px;">MAIL</span> <span>email@email.com</span><br>
		  <div style="font-size: 12px;">&nbsp;</div>
      </td>
      <td class="dynTd" style="width: 12px;"></td>
      <td class="dynTd" style="vertical-align: top;">
	    <img src="https://xxxxxxxxxx/cccccccc.jpg" alt="Company Name" width="118" height="18">
		<div style="font-size: 8px;">&nbsp;</div>
		Company Name<br>
		Company Address<br>
		Zip code and City<br>
		<div style="font-size: 5px;">&nbsp;</div>
		<a href="http://www.company-url.de" style="color:#eb6909;text-decoration: none;"><b>www.company-url.de</b></a>
	  </td>
	</tr>
  </table>

</html>

Answer 1

在保留tr的同时将td转换为块将导致浏览器进行补偿 - 根据Tables规范，

如果'table-row'框的子C不是'table-cell'，则在C周围生成一个匿名的'table-cell'框，并且所有C的连续兄弟都不是'table-cell'框。

display:block的td元素不再是'table-cell'了！因此，浏览器会创建这样一个匿名表格单元格。显然，Chrome以与FF和IE不同的方式这样做。

解决方案是确保不会发生这种情况;例如，将表中的所有元素转换为block，以便不需要匿名表格单元格。

@media screen and (max-width: 432px) {
  table, tr, td {display: block;}
}

<table style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';font-size:12px;">
  <tr>
    <td style="vertical-align: top">
      <img src="https://xxxxxxxxxx/ccccccc.jpg" width="95" height="85">
    </td>
    <td style="vertical-align: top; display: block;">
      <span style="color:#eb6909;font-size:14px;"><b>Name Surname</b></span><br>
      <div style="font-size: 5px;">&nbsp;</div>
      <span>Title</span>
      <div style="font-size: 10px;">&nbsp;</div>
      <span style="color:#eb6909;font-size:10px;">TEL</span> <span>+00 000000 000000</span><br>
      <span style="color:#eb6909;font-size:10px;">MOBILE</span> <span>+00 000000 000000</span><br>
      <span style="color:#eb6909;font-size:10px;">MAIL</span> <span>email@email.com</span><br>
      <div style="font-size: 12px;">&nbsp;</div>
    </td>
    <td class="dynTd" style="width: 12px;"></td>
    <td class="dynTd" style="vertical-align: top;">
      <img src="https://xxxxxxxxxx/cccccccc.jpg" alt="Company Name" width="118" height="18">
      <div style="font-size: 8px;">&nbsp;</div>
      Company Name<br> Company Address<br> Zip code and City<br>
      <div style="font-size: 5px;">&nbsp;</div>
      <a href="http://www.company-url.de" style="color:#eb6909;text-decoration: none;"><b>www.company-url.de</b></a>
    </td>
  </tr>
</table>

在所有浏览器中看起来都一样。你可以努力使它看起来像你想要的方式......

@media代码似乎无法在Chrome中运行

1 个答案: