クロムとサファリのスペースと幅を変更する

いくつかのデータ（input & selectなど）を持つこのテーブルはあります。どのオプションも選択されていない場合は、すべてのブラウザでスペーシングが正しいですが、 selectスペーシングはSafariとChromeでのみ変更されますが、Firefoxでは変更されません。クロムとサファリのスペースと幅を変更する

クロームをクリックした後& BEFORE Select

Firefoxの上でクリックした後Select

Chromeををクリックする前に、

それはFirefoxで正常に動作しますので、私は、任意のコードが含まれていませんでした、と私は多分それは私が私のstylesに入れなければならないブラウザに関するいくつかのCSSの問題だが、必要であれば、私はまた私を置くと思いましたコード。

UPDATE

私はまた、コードを追加： 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>

出典

2016-04-07 reshad

どうやらドロップ選択のでは選択がドロップダウンされていないときよりも広くなっています。回避策として、選択肢自体がiotsの幅広いオプションの内容と同じ幅であることを確認するために、何をすべきかわからない。 –

@MrListerまた、オプションの長さを変更しましたが、まだこの問題があります。 – reshad

Hm。別の問題は、選択を閉じると元のサイズに戻らないということです。解決策があるかどうかは不明です。 –

一つの選択肢はposition:relative;への選択含むdiv要素を設定することで、position: absolute;に自分自身を選択しますそれは流れからそれを取り除くので、エレメのサイズ変更を防ぎますnts。

<!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>

出典

2016-04-07 10:54:54

良いことだと、プロジェクトでどのように見えるのか教えてくれた。 – reshad

JavaScriptを必要としないので、これは私よりも優雅です。 –

確かに、測位は問題となり、ちょっと混乱しますが、それは克服することができます。 –

ビットハック

ていますが、少しは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>

出典

2016-04-07 10:59:37

クロムとサファリのスペースと幅を変更する

答えて

関連する問題