Question

我使用以下css进行选择：

select{
    border: 1px solid #707A68;
    border-radius: 4px 4px 4px 4px;
    margin: 0px 0 5px;
    padding: 8px 10px;
}

边框半径在IE中不起作用，我很好，但填充也没有渲染。有没有解决方法或我做错了什么？在Chrome和FF中运行良好

这是页面上的整个代码：

<input type="text" placeholder="Hello World" />
<select>
<option> Option one</option>
    <option> Option two</option>
</select>

<style>
select{
margin-top:20px;
margin-left:20px;
display:block;
padding:20px;

}
</style>

Answer 1

我终于找到了答案！我只需要添加

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

到我的代码！

Answer 2

将此css用于所有浏览器+

<select>
<option> Option one</option>
    <option> Option two</option
</select>

select{
margin-top:10px;
    margin-left:10px;
        display:block;
    padding:5px;
    border:1px 5px #000;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;

}

Answer 3

你使用的是什么版本的IE？，因为我在IE8中测试了它，我得到了填充。

enter image description here

您可以尝试-ms-border-radius: 4px;获取border-radius，至少在IE 9和IE10中它应该可以正常工作。

Answer 4

<select>是内联元素，如果要将填充应用于内联元素，则需要添加display：block;这将使它成为一个块元素。在IE8上测试过。

小提琴：http://jsfiddle.net/Qs3E8/4/

在IE8中选择填充

4 个答案: