Chrome DevTools不能使用Select元素

我正在爲網站的移動設備修復樣式表，我使用內置於Chrome中的DevTools進行測試。我現在在Windows操作系統上使用Chrome版本53.0.2785.116。Chrome DevTools不能使用Select元素

我的問題是，當我使用DevTools時，<select>元素的展開部分（通常會掉落的部分）完全偏離中心並顯示爲黑盒子。

起初我以爲這是風格錯誤，但我創建了新的.html文件，並簡單地在頁面中添加了一個<select>元素，並且找到了相同的內容。

我意識到，在實際設備上，下拉部分的顯示方式不同（作爲Rolodex類型動畫中設備底部的部分）;然而，我無法使用選擇菜單進行測試......

有沒有解決此問題的方法？

這裏是我的代碼：

<!DOCTYPE html> 
<html> 
<title></title> 
<head> 
</head> 
<body> 
    <select> 
     <option>a</option> 
     <option>b</option> 
     <option>c</option> 
     <option>d</option> 
     <option>e</option> 
    </select> 
</body> 
</html>

這是問題的一個截圖：

來源

2016-09-21 Frinavale

可能的重複[簡單選擇標記與選項不工作在Chrome]（http://stackoverflow.com/questions/39635438/simple-select-tag-with-options-not-working-on-chrome） – derloopkat

出於測試目的，你可以從移動設備類型更改爲臺式機（觸摸）。這將允許您解決select元素和移動仿真的問題。

要啓用這些選項，請打開您的開發人員工具，方法是正確並檢查您所在的頁面，或按f12鍵。單擊旋轉圖標右側的菜單圖標（3點）（菜單圖標位於右下方的菜單） - 編輯：請參閱圖像圓點以紅色圈出。

選擇顯示設備類型和顯示設備的像素比例
從第一個下拉菜單響應，並輸入你的其他設備值

爲了節省不必做這一切的時候，你可以創建自定義設備配置文件

在第一個下拉列表中選擇編輯然後添加自定義設備
注：如果您已經創建一個自定義的設備類型編輯纔會出現，看到編輯下文如何，第一次創建自定義設備。

編輯： 對於Chrome版本53.0.2785。143適用於Windows，這是你將採取的步驟來完成添加自定義設備類型：

瀏覽到你想測試並通過敲擊F12
命中F1打開打開開發者工具的頁面開發者工具設置
在設置菜單
選擇設備添加自定義設備具有相同配置的細節要測試並且如上所述做設備。

來源

2016-10-06 20:09:15 Bosc

謝謝。我不知道您使用的Chrome版本是什麼，但有關如何添加自定義設備的說明與我的Chrome版本不符。我必須：打開開發人員工具，在開發人員工具中單擊菜單（「...」按鈕），單擊設置，從設置菜單中選擇設備並從那裏開始。這對我非常有幫助。非常感謝 – Frinavale

很高興幫助，奇怪的使用最新版本的鉻在Windows上也是：53.0.2785.143想知道他們爲什麼不同 – Bosc

@Frinavale認爲，因爲我已經有一個自定義設備設置我可以選擇單擊編輯在您選擇設備的第一個下拉菜單中，它會直接進入該頁面。 – Bosc

Chrome DevTools不能使用Select元素

回答

相關問題