css – Internet Explorer 9(和10)正在向后渲染圆角

前端之家收集整理的这篇文章主要介绍了css – Internet Explorer 9(和10)正在向后渲染圆角前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
基本上它的作用是渲染右上角和右下角,而不是正确的顶部左下角.

这是css:

  1. .formlabel,.formlabel2,.formhead{
  2. width:200px;
  3. font-size:18px;
  4. height:22px;
  5. font-weight:normal;
  6. background-color:#FF8000;
  7. text-align:right;
  8. margin-top:5px;
  9. padding-right:1px;
  10. border:none;
  11. color:white;
  12. -webkit-border-top-left-radius: 5px;
  13. -webkit-border-bottom-left-radius: 5px;
  14. -moz-border-radius-topleft: 5px;
  15. -moz-border-radius-bottomleft: 5px;
  16. border-top-left-radius: 5px;
  17. border-bottom-left-radius: 5px;
  18. }

从我能够推导出来的,它发生是因为它们在另一个类中,具有方向:rtl属性.如果我将方向:ltr添加到上面的类,那么这些角是正确的. (您可以使用上述代码添加方向来尝试此方法:rtl)

问题是网站是在希伯来语,所以我需要它保持rtl.

有任何想法吗?

解决方法

我会想到一个简单的解决方案是将条件注释放在< head>对于IE9使用你已经颠倒的css.
  1. <!--[if gte IE 9]>
  2. <style>
  3. .formlabel,.formhead{
  4. border-top-right-radius: 5px; /* switched from left */
  5. border-bottom-right-radius: 5px; /* switched from left */
  6. }
  7. </style>
  8. <![endif]-->

如果您愿意,而不是在条件注释中使用样式,则可以链接到单独的外部样式表.

猜你在找的CSS相关文章