在 Chrome 和 Safari 中更改 space 和宽度

Question

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

Chrome 在点击 Select

之前

Chrome 在点击 Select

之后

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>

Answer 1

一个选项是将包含 div 的 select 设置为 position:relative;，并将 select 本身设置为 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>

Answer 2

有点hackish，但如果你不反对使用一点JavaScript，你可以在加载时放下select并立即关闭它。

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>

在 Chrome 和 Safari 中更改 space 和宽度

Changing space and width in Chrome and Safari

html

css

browser

width