HTML 表单在 Chrome 24 上的外观与在 Chrome 23 上的外观不同 [关闭]答案

【问题标题】：HTML form looking differently on Chrome 24 than it used to on Chrome 23 [closed]HTML 表单在 Chrome 24 上的外观与在 Chrome 23 上的外观不同 [关闭]
【发布时间】：2013-01-25 17:28:41
【问题描述】：

我注意到 我的网站在 Chrome 上次更新后看起来有所不同 (24.0.1312.56) 虽然我没有修改任何代码行。 更准确地说，表单上的输入被本地化在不同的地方，文本似乎比以前更大。

Here's the rendering on Chrome 23
And here's the rendering on the latest version of Chrome.

我在不同的电脑上做测试，结果是一样的。
IE 和 Firefox 没有任何变化。

请查看下面的犯罪代码。

HTML

<table class="form-fields-table form-main-block">
  <colgroup>
    <col class="form-select-col"></col>
    <col class="form-select-col"></col>
    <col class="form-select-col"></col>
  </colgroup>
  <tr class="form-input-block">
    <td class="form-label">
      <label for="sit_pro">Vous êtes<span class="form-required">*</span> :</label>
      <select name="sit_pro">
        <option value="0">-- Sélectionnez --</option>
        (...)
      </select>
    </td>
    <td class="form-label">
      <label for="sit_bien">Votre situation<span class="form-required">*</span>:</label>
      <select name="sit_bien">
        <option value="0">-- Sélectionnez --</option>
        (...)
      </select>
    </td>
    <td class="form-label">
      <label for="type_bien">Votre type de bien<span class="form-required">*</span> : </label>
      <select name="type_bien">
        <option value="0">-- Sélectionnez --</option>
        (...)
      </select>
    </td>
  </tr>
</table>

CSS

.form-fields-table .form-main-block td {
  padding-top: 15px;
}

.form-fields-table td {
  border-spacing: 10px 0;
  vertical-align: middle;
  padding: 2px 0;
}

.form-comments-table td {
  vertical-align: top;
}

.form-fields-table td.form-label-top {
  vertical-align: top;
  padding-top: 8px;
}

.form-select-col {
  width: 200px;
}

.form-label {
  text-align: left;
  color: #444;
  font-weight: bold;
  font-size: 14px;
}

知道发生了什么吗？

【问题讨论】：

欢迎上网。 Web 开发的一个事实是，浏览器在升级时经常会改变它们的行为方式。
您正在使用表格来调整它们的大小。由于表格呈现期间应用的其他约束，对表格元素使用显式尺寸比精确设置更友好的提示。
如果您想避免标签尴尬地断裂，我会尝试在它们上使用white-space: pre-wrap，并使下拉列表跨越单元格的宽度。和/或使列足够宽以留下一些摆动空间。我也会尝试设置表格单元格的宽度，或者使用min-width 和width。（我有同样的要求，最后只是做了上述所有事情并交叉手指，不知道究竟是什么让尺寸粘住了。）

标签： html css forms google-chrome css-tables

【解决方案1】：

似乎谷歌浏览器是根据最大输入文本来设置列宽的。就我而言，最大的输入文本是中间下拉列表的选择输入选项之一。

我已经使用td 和select 标签上的max-width 属性解决了这个问题：

.form-label {
  text-align: left;
  color: #444;
  font-weight: bold;
  font-size: 14px;
  max-width: 155px; // new
}

.form-label select {
    max-width: 155px; // new
}

而且渲染效果很好。

【讨论】：