2

我正在使用以下 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>
4

4 回答 4

3

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

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

到我的代码！

于 2012-05-03T18:35:46.897 回答
1

将此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;

}
于 2013-12-07T23:30:28.880 回答
0

<select>'s are inline elements and if you want padding to be applied to inline elements you need to add display:block; which will make it a block element. Tested on IE8.

fiddle: http://jsfiddle.net/Qs3E8/4/

于 2012-05-03T08:11:33.463 回答
0

您使用的是哪个版本的 IE？，因为我在 IE8 中对其进行了测试，并且得到了填充。

在此处输入图像描述

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

于 2012-05-03T07:45:08.580 回答