-1

我注意到自上次更新 Chrome (24.0.1312.56)以来我的网站看起来有所不同，尽管我没有修改任何代码行。更准确地说，表单上的输入被本地化在不同的位置，并且文本看起来比以前更大。

这是 Chrome 23
上的渲染 这是最新版 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;
}

知道发生了什么吗？

4

1 回答 1

0

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

我已经使用max-widthontd和selecttags 的属性解决了这个问题：

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

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

而且渲染效果很好。

于 2013-01-28T11:24:49.470 回答