Chrome DevTools无法与Select元素一起使用 [英] Chrome DevTools not working with the Select element
问题描述
我正在为网站的移动设备修复样式表，并且正在使用Chrome内置的DevTools进行测试.我现在正在Windows操作系统上使用Chrome版本53.0.2785.116.
我的问题是，当我使用DevTools时，< select> 元素的展开部分(通常是下拉的部分)完全偏离中心并显示为黑框
起初，我认为这是样式上的问题，但是我创建了一个新的.html文件，并只是在页面中添加了< select> 元素，并且发现了相同的内容.
我意识到在实际设备上，下拉部分的显示方式有所不同(作为设备底部的部分，带有Rolodex类型动画中的选项)；但是，我无法将选择菜单用于测试目的...
有没有办法解决这个问题?
这是我的代码:
<！DOCTYPE html>< html>< title></title>< head></head><身体><选择>< option> a</option>< option> b</option>< option> c</option>< option> d</option>< option> e</option></select></body></html> 这是问题的屏幕截图:
出于测试目的，您可以将设备类型从移动设备更改为台式机(触摸).这将使您可以通过 select 元素和移动设备仿真来解决此问题.
要启用这些选项，请通过右击并检查您所在的页面来打开开发人员工具，或按f12键.点击旋转图标(位于右上角铬下方的菜单图标)右侧的菜单图标(3个点)-编辑:查看以红色圈出的图像点.
- 选择显示设备类型和显示设备像素比率
- 从第一个下拉列表中选择响应式"，然后输入其他设备值
要省去所有时间的麻烦，您可以创建自定义设备配置文件
- 在第一个下拉列表中，选择编辑，然后选择添加自定义设备
- 注意:仅当您已经创建了自定义设备类型时，编辑才会显示，有关如何首次创建自定义设备的信息，请参见下面的编辑./li>
对于Windows的Chrome版本53.0.2785.143，以下是您完成添加自定义设备类型的步骤:
- 导航至要测试的页面，然后按F12键以打开开发人员工具
- 按F1打开开发人员工具设置
- 在设置菜单中选择设备
- 添加具有与您要测试和执行的设备相同的配置详细信息的自定义设备.
I am working on fixing a style sheet for mobile devices for a website and I am using the DevTools that come built into Chrome for testing purposes. I am using Chrome version 53.0.2785.116 on a Windows operating system right now.
My problem is that, when I'm using the DevTools, the <select> elements' expanded section (the part that normally drop's down) is completely off center and appears as a black box.
At first I thought it was something wrong in the style, but I created new .html file and simply added a <select> element to the page and have found the same thing.
I realize that on the actual device the drop down section is displayed differently (as a section at the bottom of the device with the options in a Rolodex type animation); however, I am unable to use the select menu for testing purposes...
Is there any way around this problem?
Here is my code:
<!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>
Here is a screenshot of the problem:
For testing purposes you can change the device type from mobile to desktop(touch). This will allow you to get around the issue with the select element and mobile emulation.
To enable these options open your developer tools by righting and inspecting the page you are on or press f12. Click on the menu icon (3 dots) to the right of the rotate icon (menu icon below chromes top right) - Edit: see image dots circled in red.
- Select Show device type and Show device pixel ratio
- Select Responsive from the first dropdown and input your other device values
To save having to do this all the time you can create a custom device profile
- In the first dropdown select Edit then Add Custom Device
- Note: Edit will only appear if you have already created a custom device type, see the Edit below for how to create a custom device for the first time.
EDIT: For Chrome version 53.0.2785.143 for Windows, these are the steps you would take to accomplish adding a custom device type:
- Navigate to the page you want to test and open the developer tools by hitting F12
- Hit F1 to open the developer tools settings
- Select devices in the settings menu
- Add a custom device with the same configuration details as the device you want to test and do as described above.
这篇关于Chrome DevTools无法与Select元素一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
