Internet Explorer 9（和 10）正在向后渲染我的圆角

发布于 2024-12-04 07:29:29 字数 783 浏览 1 评论 0原文

基本上它的作用是将右上角和右下角渲染成圆形，而不是正确的左上角和左下角。

这是 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;
}

根据我的推断，发生这种情况是因为它们位于另一个具有 direction:rtl 属性的类中。如果我将 direction:ltr 添加到上述类中，则角会正确倒圆。（您可以通过使用上面的代码并添加 direction:rtl 来尝试此操作）

问题是该网站是希伯来语，所以我需要它保持 rtl。

有什么想法吗？

原文

Basically what it does is render the top-right and bottom-right corners round instead of the correct top+bottom-left corners.

Here's the 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;
}

From what I've been able to deduce, it happens because they're within another class that has the direction:rtl attribute. If I add direction:ltr to the above classes, then the corners are rounded correctly. (You can try this by using the above code and adding direction:rtl)

The problem is that the site is in Hebrew so I need it to stay rtl.

Any ideas?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

酷遇一生 2024-12-11 07:29:29

我本以为一个简单的解决方案是在 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]-->

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

I would have thought a simple solution would be to place a conditional comment in the <head> for IE9+ to use css which you have reversed.

<!--[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]-->

If you prefer, instead of using style in the conditional comment, you could link to a separate external stylesheet instead.

回复收藏 0 原文

~没有更多了~