当我在跨浏览器兼容性中测试我的响应式 HTML 页面时，我在 Chrome 浏览器中面临选择下拉选项问题，它根据附件显示空白的黑色矩形。
HTML
<body>
<div class="container">
<div class="select-wrapper">
<select class="select" >
<option value="1" selected="selected">Option Number 1</option>
<option value="2">A Much Longer Option Than Option 1</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="4">Option 4</option>
</select>
<span class="select-icon entypo-arrow-combo"></span>
</div>
</div>
</body>
CSS
@import "compass/css3";
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
font: 1.4em 'entypo', sans-serif;
}
///样式/
body {
background: #fafafa;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333;
`
.container {
margin: 5em auto 0;
width: 25%;
}
.select-wrapper {
background-color: #eee;
border: 1px solid #aaa;
color: #aaa;
cursor: pointer;
float: left;
overflow: hidden;
padding-right: 3em;
position: relative;
width: 100%;
}
.select {
-webkit-appearance: none;
background-color: #eee;
border-width: 0;
box-sizing: border-box;
cursor: pointer;
float: left;
font-size: 1em;
line-height: 1em;
padding: 1em 1em;
width: 100%;
width: calc(100% + 2em);
&:focus {
outline: none;
}
}
.select-icon {
position: absolute;
top: .8em;
right: 1em;
}
最佳答案
终于找到了解决方案:更新 Chrome(版本 54.0.2840.59 m)后，我使用的是 Google Chrome 版本 53.0.2785.143m，它工作正常。
关于html - 响应式选择下拉选项在桌面 Chrome 浏览器移动 View 中显示为黑色矩形框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39910192/