jon*_*sef 10 css css3 right-to-left internet-explorer-9
基本上它的作用是渲染右上角和右下角,而不是正确的顶部+左下角.
这是css:
.formlabel, .formlabel2, .formhead{
width:200px;
font-size:18px;
height:22px;
font-weight:normal;
background-color:#FF8000;
text-align:right;
margin-top:5px;
padding-right:1px;
border:none;
color:white;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
Run Code Online (Sandbox Code Playgroud)
从我能够推断出来的情况来看,它发生是因为它们属于另一个具有该direction:rtl属性的类.如果我添加direction:ltr到上面的类,则角正确舍入.(您可以使用上面的代码并添加direction:rtl)来试试这个
问题是该网站是希伯来语所以我需要它保持rtl.
有任何想法吗?
我本以为一个简单的解决方案是在<head>IE9+ 中放置一个条件注释以使用您已反转的 css。
<!--[if gte IE 9]>
<style>
.formlabel, .formlabel2, .formhead{
border-top-right-radius: 5px; /* switched from left */
border-bottom-right-radius: 5px; /* switched from left */
}
</style>
<![endif]-->
Run Code Online (Sandbox Code Playgroud)
如果您愿意,style您可以链接到单独的外部样式表,而不是在条件注释中使用。