2017-08-04 26 views
3

最近Chrome版本(可能在2017年6月)的一些更改導致<select>輸入中的選項比其他瀏覽器(或舊版Chrome中)渲染得多。HTML中的選項<select> Chrome中的選項太大

例如,在this w3schools page下拉在一些機器上呈現這樣的(鉻60.0.3112.90中,64位中,Windows 10):

Chrome 60.0.3112.90, 64 bit, Windows 10

代替預期(火狐55.0,64位,視窗10):

Firefox 55.0, 64-bit, Windows 10

是否有可以在代碼被實現爲防止它發生(CSS溶液優選)任何解決方法嗎?

到目前爲止,我發現:

  • Discussion on Chrome product forums,這證實了這個被很多人看到,但沒有回答是否是有意還是無意。此外,觀察到系統中存在觸摸屏驅動程序可能導致此行爲。
  • Chromium bug #739196說明這個問題,但還沒有明確的答案無論是故意或鉻錯誤
  • 幾個答案提示的<select>該填充爲<option>的無法通過設計CSS來控制,所以這填補了從來不容易或可能改變。
+0

同樣的問題,也有一個啓用觸摸的設備。看起來就是這個原因。 – Alex

回答

0

應該能夠爲<option>標記添加一些CSS樣式,以使其在大多數瀏覽器上以您想要的樣子顯示。

http://jsfiddle.net/Ahreu/50/

+0

我不能在這裏附上屏幕截圖,但是這個jsfiddle在我的Chrome中仍然呈現出不同的(並且明顯更大) –

+1

我剛更新了Chrome與您的相同版本,並且提琴似乎很好。事實上,我將這種造型脫下來,一切看起來都很好。也許有一個插件或類似的東西影響你的用戶界面? – Sage

+1

我也檢查了這個特定版本的Chrome的小提琴(和W3頁),它看起來很好 –