设置背景颜色时 IE 中出现不必要的边框

Posted

技术标签:

【中文标题】设置背景颜色时 IE 中出现不必要的边框【英文标题】:Unnecessary border is coming in IE while setting background color 【发布时间】:2014-04-08 07:58:06 【问题描述】:

我在 IE 10(文档模式:IE 7 标准)中遇到 CSS 问题。在设置背景颜色时,我的下拉列表中有多个边框。如屏幕截图所示:

额外的边框出现在顶部和左侧。我已经尝试过border:none、border:0、outline:none、outline:0、border:transparent 等,但它们都不适合我。

编辑:只有在将背景颜色添加到下拉列表时,我才会遇到此问题。

【问题讨论】:

只是一个想法:试试box-shadow: 0 0 0 transparent; 它可能是一个嵌入框阴影。 @David,box-shadow 也不适合我。 【参考方案1】:

好的,我得到了删除边框的解决方案。根据这个Link add span 作为包装器,经过一些 CSS 操作后,我的工作正常。

这是我在代码中所做的:

        span.dropdown 
            float: left;
            overflow: hidden;
            border: 1px solid #ccc;
            height:20px;
        
        select 
            background: none;
            border: none;
            color: #575652;
            float: left;
            outline: none;
            text-align: left;
            text-decoration: none;
            padding:6px 2px 6px 2px!important;
            display:block;height:23px;
        
        span.dropdown select 
            margin: -2px  -3px -3px -2px ;
         

html 中:

 <span class="dropdown">
...
//dropdown code
...
</span>

【讨论】:

【参考方案2】:

很遗憾,IE10 不允许您删除下拉菜单上的边框。

编辑: 未经测试但尝试style="border-style:none;

还未经测试,请尝试border: none !important;

【讨论】:

你有没有想过呢?我有兴趣了解 我找到了一种适合我的解决方案,请参阅上面的答案。

以上是关于设置背景颜色时 IE 中出现不必要的边框的主要内容,如果未能解决你的问题,请参考以下文章

CSS背景颜色与IE中表格单元格的边框重叠

word表格背景颜色设置 word表格如何设置背景颜色

如何使用 javascript 或 jquery 为每个数组元素设置背景颜色和边框?

边框半径后面的HTML背景颜色

设置textView的边框和背景颜色

CSS中div背景与边框 颜色设置无效