Internet Explorer 9（および10）が丸みのあるコーナーを後方にレンダリングしています

基本的には、正しい上端+左下の角の代わりに、右上および右下の角を丸くします。ここでInternet Explorer 9（および10）が丸みのあるコーナーを後方にレンダリングしています

は、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を維持する必要があるということです。

アイデア？

出典

2011-09-11 jontsef

Stupid _stupid_ IE開発者。今はちょっとした適合性がいいですね。 – Bojangles

絶対配置を使用して、2つの要素を積み重ね、背景と境界線と方向を入れます：ltrを下位要素に、すべてのRTLコンテンツを上要素に入れますか？ – Neil

私は簡単な解決策は、あなたが逆転したCSSをIE9 +のために<head>に置くことだと思っていたでしょう。あなたが希望する場合

<!--[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を使用するには、代わりに別の外部スタイルシートにリンクすることも可能です。

出典

2011-09-11 23:39:33 tw16

条件付きコメントはIE10ではサポートされなくなりました。 – duri

@Duri：それは面白いです。 IE9ではまだ動作しますが、IE10が最終化されるまでに誰かが問題を知らせてくれることを前提に修正されることを願っています。 – tw16

@jontsef：IE10でテストしたところ、バグは修正されていたので、上記の条件文はIE9でも動作します。したがって、問題は解決しました:) – tw16

Internet Explorer 9（および10）が丸みのあるコーナーを後方にレンダリングしています

答えて

関連する問題