在 Chrome 和 Safari 中更改空间和宽度答案

【问题标题】：Changing space and width in Chrome and Safari在 Chrome 和 Safari 中更改空间和宽度
【发布时间】：2016-07-28 04:25:11
【问题描述】：

我有这张表，其中有一些数据（input & select 等...），当未选择任何选项时，间距在所有浏览器中都是正确的，但是当我点击 select 时间距只会在Safari 和Chrome 中更改，但在Firefox 中不会更改。

点击Select之前的Chrome

点击Select后的Chrome

Firefox 之前和之后点击Select

我没有包含任何代码，因为它在 Firefox 中运行良好，我认为这可能是浏览器的一些 css 问题，我应该将其放入我的 styles，但如果需要，我也会放入我的代码。

更新

我还添加了代码： Working jsFiddle

.rTableCell,
.rTableHead {
  xfloat: left;
  height: 36px;
  overflow: hidden;
  padding: 3px 3%;
  width: 150px;
  vertical-align: middle;
  line-height: 120%;
  display: table-cell;
}
.rTableCellId {
  width: 52px;
}
.rTableCellVal {
  width: 90px;
  vertical-align: middle;
}

<div class="rTable">
  <div class="rTableRow" style="color:#797979">
    <div class="rTableCell rTableCellId ndLabel">835</div>
    <div class="rTableCell ndLabel" style="width:240px;">Visits on the website that end with the purchase</div>
    <div class="rTableCell ndLabel" style="width:160px;">LP thank you</div>

    <div class="rTableCell rTableCellSrc ndLabel">GA</div>

    <div class="rTableCell rTableCellUrlLoc" style="width:180px">
      <input id="campaignStructureList0.dataSourceModelList0.urlLocation" name="campaignStructureList[0].dataSourceModelList[0].urlLocation" style="width: 145px;" class="ndInbox" type="text" value="" />
    </div>
    <div style="margin-top:7px; width: 150px" class="rTableCell rTableCellVal">
      <select id="campaignGoalId" name="campaignStructureList[0].dataSourceModelList[0].goalId" style="width:100%">
        <option value="">--- Select1 ---</option>
        <option value="">--- Select2 ---</option>
      </select>
    </div>
  </div>
  <br />
</div>

【问题讨论】：

显然，下拉选择的 with 比不下拉选择时更宽。除了作为一种解决方法之外，我不确定该怎么做，以确保选择本身与 iots widest 选项的内容一样宽。
@MrLister 我也更改了选项长度，但仍然有这个问题。
嗯。另一个问题似乎是关闭选择后宽度不会恢复到原始宽度。不知道有没有解决办法。
@MrLister 是的！还有一个是另一个问题。

标签： html css browser width

【解决方案1】：

一种选择是将选择的包含 div 设置为position:relative;，并将选择本身设置为position: absolute;，这样可以将其排除在流程之外，从而防止调整元素的大小。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.rTableCell,
.rTableHead {
  xfloat: left;
  height: 36px;
  overflow: hidden;
  padding: 3px 3%;
  width: 150px;
  vertical-align: middle;
  line-height: 120%;
  display: table-cell;
}

.rTableCellId {
  width: 52px;
}

.rTableCellVal {
  width: 90px;
  vertical-align: middle;
}

.rTableCell {position: relative;}
.rTableCell select {position: absolute; left: 20px; top: 12px;}


</style>
</head>
<body>

<div class="rTable">
  <div class="rTableRow" style="color:#797979">
    <div class="rTableCell rTableCellId ndLabel">835</div>
    <div class="rTableCell ndLabel" style="width:240px;">Visits on the website that end with the purchase</div>
    <div class="rTableCell ndLabel" style="width:160px;">LP thank you</div>

    <div class="rTableCell rTableCellSrc ndLabel">GA</div>

    <div class="rTableCell rTableCellUrlLoc" style="width:180px">
      <input id="campaignStructureList0.dataSourceModelList0.urlLocation" name="campaignStructureList[0].dataSourceModelList[0].urlLocation" style="width: 145px;" class="ndInbox" type="text" value="" />
    </div>
    <div style="margin-top:7px; width: 150px; " class="rTableCell rTableCellVal">
      <select id="campaignGoalId" name="campaignStructureList[0].dataSourceModelList[0].goalId" >
        <option value="">--- Select1 ---</option>
        <option value="">--- Select2 ---</option>
      </select>
    </div>
  </div>
  <br />
</div>

</body>
</html>

【讨论】：

好，它有帮助，让我看看它在项目中的样子。
啊，这个比我的更优雅，因为它不需要 JavaScript。
诚然，定位成为一个问题，并且变得有点混乱，但这是可以克服的。

【解决方案2】：

有点骇人听闻，但如果您不反对使用一点 JavaScript，您可以在加载时下拉选择并立即将其关闭。

window.onload=function(){
  var sel = document.getElementById('campaignGoalId');
  sel.size=sel.options.length;
  sel.size = 1;
}

.rTableCell,
.rTableHead {
  xfloat: left;
  height: 36px;
  overflow: hidden;
  padding: 3px 3%;
  width: 150px;
  vertical-align: middle;
  line-height: 120%;
  display: table-cell;
}

.rTableCellId {
  width: 52px;
}

.rTableCellVal {
  width: 90px;
  vertical-align: middle;
}

<div class="rTable">
  <div class="rTableRow" style="color:#797979">
    <div class="rTableCell rTableCellId ndLabel">835</div>
    <div class="rTableCell ndLabel" style="width:240px;">Visits on the website that end with the purchase</div>
    <div class="rTableCell ndLabel" style="width:160px;">LP thank you</div>

    <div class="rTableCell rTableCellSrc ndLabel">GA</div>

    <div class="rTableCell rTableCellUrlLoc" style="width:180px">
      <input id="campaignStructureList0.dataSourceModelList0.urlLocation" name="campaignStructureList[0].dataSourceModelList[0].urlLocation" style="width: 145px;" class="ndInbox" type="text" value="" />
    </div>
    <div style="margin-top:7px; width: 150px" class="rTableCell rTableCellVal">
      <select id="campaignGoalId" name="campaignStructureList[0].dataSourceModelList[0].goalId" style="width:100%">
        <option value="">--- Select1 ---</option>
        <option value="">--- Select2 ---</option>
      </select>
    </div>
  </div>
</div>

【讨论】：