css - IE CSS 存在负边距时背景被剪切的问题

标签 css internet-explorer

这是有问题的网站

http://kryptodesigns.com/dev/forum.php?styleid=3

在 FF、Chrome 中一切看起来都很好,请注意导航中的论坛链接以及红色背景如何扩展到灰色导航容器之外。

现在在 IE 中查看相同的链接,它会切断导航容器外部整个边距的背景颜色。

我在谷歌上到处寻找有类似问题的人,但没有运气。

这是我正在谈论的内容的图片。

任何有关解决此问题的帮助都会很棒。

感谢您的帮助!

最佳答案

问题出在此处的过滤器:

#navtabs {
    /* for non-css3 browsers */
    background: #CDCFD0 url(kryptodesigns/KD0010/misc/navigation/navigation-repeat.png) top left repeat-x;
    /* for IE */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CDCFD0');
    /* for webkit browsers */
    background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CDCFD0)); 
    /* for firefox 3.6+ */
    background: -moz-linear-gradient(top,  #FFFFFF,  #CDCFD0); 
}

使用过滤器会导致overflow:hidden式的效果,这就是为什么li的顶部看不到的原因.

要解决此问题,我建议您只需删除过滤器,因为您已经拥有相同渐变的图像版本。

关于css - IE CSS 存在负边距时背景被剪切的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10429845/

相关文章:

html - MDL 将开关与其标签对齐

c# - 通过 C# 按 Internet Explorer 的 "File download dialog"的保存按钮

javascript - 无法在 IE 中通过 AJAX 更改 session 变量

html - 为什么此菜单在 Firefox 3.5 和 IE7 中呈现效果不佳?我该如何适应?

html - 以 CSS Transform 或 Flexbox 为中心,哪一个更受支持?

css - Twitter Bootstrap 和优雅的图标呈现双图标

javascript - 防止div扩展滚动条

javascript - JS在IE中扩展空范围

jquery - 需要帮助追踪 jQuery 错误

html - 将图像置于另一图像之上