IE8に角丸をCSSで対応させたいです。
JSはさけたいです。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
投稿2015/01/27 00:07
総合スコア145121
0
ベストアンサー
こんにちは。
僕も IE8以前のブラウザには無理に角丸に対応させる必要はないと考えていますが、maisumakunさんが紹介している CSS3 PIEのほかに、下記のような対処のしかたがありますので、ご参考までにお知らせします。
CSS内につぎのコードを記述し、同じ階層に「border-radius.htc」を配置してください。
lang
1.radius { 2 -moz-border-radius: 10px; /* Firefox */ 3 -webkit-border-radius: 10px; /* Safari and Chrome */ 4 border-radius: 10px; 5 behavior: url(border-radius.htc); /* IE */ 6}
なお、border-radius は、上下左右それぞれの角丸の半径を指定することも可能です。
IE8 用
lang
1border-top-left-radius: 10px; /* 左上 */ 2border-top-right-radius: 10px; /* 右上 */ 3border-bottom-right-radius: 10px; /* 右下 */ 4border-bottom-left-radius: 10px; /* 左下 */
Firefox 用
lang
1-moz-border-radius-topleft: 10px; /* 左上 */ 2-moz-border-radius-topright: 10px; /* 右上 */ 3-moz-border-radius-bottomright: 10px; /* 右下 */ 4-moz-border-radius-bottomleft: 10px; /* 左下 */
Safari & Chrome 用
lang
1-webkit-border-top-left-radius: 10px; /* 左上 */ 2-webkit-border-top-right-radius: 10px; /* 右上 */ 3-webkit-border-bottom-right-radius: 10px; /* 右下 */ 4-webkit-border-bottom-left-radius: 10px; /* 左下 */
border-radius.htcはこちら(リンク)からダウンロードできます。
投稿2015/01/27 04:44
退会済みユーザー
総合スコア0
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。