在 IE8 中选择填充答案

【问题标题】：Select Padding in IE8在 IE8 中选择填充
【发布时间】：2013-12-08 07:30:28
【问题描述】：

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

【问题讨论】：

padding is not working in Safari and IE in select list 的可能重复项

标签： html css

【解决方案1】：

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

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

我的代码！

【讨论】：

其中一个“Doh！”时刻。 -荷马
IE9 是否支持负值填充。我正在尝试自定义 IE9 中的选择选项，如果我在我的项目中实现它，则小提琴jsfiddle.net/qhCsJ/2187 中的示例不起作用。选择的宽度不在 IE9 中渲染，所以我尝试使用 padding-right:-10px 也不起作用。请参阅我的问题stackoverflow.com/questions/19384907/…。如果可能，请帮助我。

【解决方案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;

}

【讨论】：

【解决方案3】：

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

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

【讨论】：

我使用的是相同的版本，我看到了select，如图所示。

【解决方案4】：

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

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

【讨论】：

不，不是因为select 是内联的。因为select 是一个被替换的元素！正常的内联元素会得到填充。顺便说一句，你的小提琴有错别字。
@mcmwhfy 我在 IE 8 中打开了小提琴链接，它正在工作。但是当我在一个文件中编写相同的代码并运行它时，它不是。知道为什么吗？ screencast.com/t/sjtWsSgs
我必须查看该页面中的 html 和 css 代码才能给您答案，可能是因为受到其他元素的限制。
@mcmwhfy 我已经对我的问题进行了编辑，以在页面上显示整个代码。页面上没有其他内容。我做了它来测试它。