[英]Why do Chrome, Firefox and IE all render fixed-width SELECT controls differently?
我在這個上失去了頭發 ......似乎當我修改寬度為HTML SELECT控件時，它會根據瀏覽器的不同呈現其寬度。
任何想法如何標准化這個而不必轉向多個樣式表？
這是我正在使用的：
.combo
{
padding: 2px;
width: 200px;
}
.text
{
padding: 2px;
width: 200px;
}
這是我的頁面的文檔類型：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
嘗試在選擇上設置font-size ，這可能會影響它們的呈現方式。 還要考慮min-width和max-width屬性。
表單控件總是不那么順從樣式化嘗試，特別是選擇和文件輸入，因此在跨瀏覽器中可靠地設置樣式並考慮到未來打樣的唯一方法是用JavaScript或Flash替換它們並模仿它們的功能
輸入[type = text]，選擇{border：solid 1px＃c2c1c1; 寬度：150px; 填充：2px; }
// 然后
選擇{寬度：156px; //需要輸入[type = text] width +（border and padding）}
/ *輸入[type = text] width = width + padding + border
選擇寬度恰好等於寬度。 填充和邊框在寬度約束內呈現。 這就是SELECT滾動的方式......
* /
確保刪除所有默認邊距和填充，並明確定義它們。 確保使用正確的DOCTYPE，從而在標准模式下呈現IE。
您可以使用偽造的下拉窗口小部件並替換SELECT。
瀏覽器傾向於限制使用CSS設置表單控件樣式的數量，因為表單控件具有許多復雜的樣式，這些樣式因操作系統而異。 CSS無法完全描述，因此瀏覽器將其中一些限制在一定范圍內。
Eric Meyer寫了一篇關於這個主題的好文章：
http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/
你能做的最好就是接受你無法完全控制表單字段的外觀，並嘗試任何非常重要的樣式。
Martinator是對的。
聽起來你正試圖控制各種類型的輸入或菜單的寬度。 您可以直接選擇對象並指定寬度。 例如：
select {
width:350px;
}
或者您可以使用文本區域執行此操作：
select {
width:350px;
}
其他類型的輸入需要Martinator提到的語法。 因此，對於文本，輸入甚至文件類型輸入，您可以為每個輸入執行此操作：
input[type=text] {
width:350px;
}
input[type=input] {
width:350px;
}
input[type=file] {
width:350px;
}
嘗試使用Firebug或Chrome的“Inspect Element”功能（右鍵單擊選擇控件，單擊“inspect element”）以確切了解為該特定對象繼承/呈現的樣式屬性。 這應該引導你朝着正確的方向前進。
我已經嘗試了所有這些建議......我終於擁有它，所以它在IE和Firefox中看起來很棒。 看起來SELECT控件上的填充有問題。 如果我將SELECT的寬度增加2個像素，則正確的尺寸。
.combo
{
padding: 2px;
width: 206px;
}
.text
{
padding: 2px;
width: 200px;
}
但是，Chrome仍然沒有顯示相同的大小。
為什么html項目在IE和Firefox以及Chrome中的顯示方式不同？
[英]Why do html items display differently in IE and Firefox and Chrome?
為什么此表格在Chrome和Firefox之間呈現不同的外觀？
[英]Why does this table render differently between Chrome and Firefox?
為什么這個簡單的嵌套DIV在Chrome和FireFox中的渲染方式不同？
[英]Why does this simple, nested DIV render differently in Chrome and FireFox?
為什么IE和Chrome渲染CSS的border-bottom-width不同？
[英]Why are IE and Chrome rendering css border-bottom-width differently?
在IE 8，Firefox和Google Chrome中，選擇框中的項目寬度不同
[英]The width of items in select box is different in IE 8, Firefox and Google Chrome
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.