为什么在IE中LEFT侧出现border-top-right-radius

时间:2012-08-14 14:02:27

标签: css internet-explorer css3

我正在重新设计一个适合IE的网站。

该网站基于drupal 7并且是希伯来语。

使用指南针

编制舍入年龄
/* line 28, ../sass/boxshadow.scss */

#border-radius {
    -moz-border-radius-topright: 8px;
    -webkit-border-top-right-radius: 8px;
    border-top-right-radius: 8px;
    -moz-border-radius-bottomright: 8px;
    -webkit-border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

一切都适用于现代浏览器,但在IE浏览器的左侧是圆角。当我将属性更改为左侧时。它适用于ie但在其他浏览器上疯狂。

In case you want to see for yourselves   上面的块是从指南针中取出的。 这就是我在网站上使用的内容。

#block-menu-menu-navigation-tabs li:first-child a,li:first-child{
 -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
    border-top-left-radius: 8px;
     -moz-border-radius-bottomright: 8px;
      -webkit-border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;

}

**使用指南针

2 个答案:

答案 0 :(得分:0)

最简单的方法是定位IE并仅提供已更改的属性。

<!--[if IEMobile 7]><html class="iem7"  lang="he" dir="rtl"><![endif]-->
<!--[if lte IE 6]><html class="lt-ie9 lt-ie8 lt-ie7"  lang="he" dir="rtl"><![endif]-->
<!--[if (IE 7)&(!IEMobile)]><html class="lt-ie9 lt-ie8"  lang="he" dir="rtl"><![endif]-->
<!--[if IE 8]><html class="lt-ie9"  lang="he" dir="rtl"><![endif]-->

例如,你可以这样写:

.iem7 {
    border-left:1px
}

等等。您应该选择不起作用的IE版本。

如果您想要定位所有IE,您可以调整条件注释:

<!--[if IEMobile 7]><html class="ie iem7"  lang="he" dir="rtl"><![endif]-->
<!--[if lte IE 6]><html class="ie lt-ie9 lt-ie8 lt-ie7"  lang="he" dir="rtl"><![endif]-->
<!--[if (IE 7)&(!IEMobile)]><html class="ie lt-ie9 lt-ie8"  lang="he" dir="rtl"><![endif]-->
<!--[if IE 8]><html class="ie lt-ie9"  lang="he" dir="rtl"><![endif]-->

现在你可以为所有IE编写css:

.ie {
    border-left:1px
}

答案 1 :(得分:0)

我想你想让它在IE9及以上版本中运行。因为低于IE9,border-radius不起作用。

您是否尝试过这样做:

#block-menu-menu-navigation-tabs li:first-child a,li:first-child{
  border-radius : 8px 0 0 8px;/* top-left top-right bottom-right bottom-left*/
  /* no need for browser prefixes */
}