web-dev-qa-db-ja.com

IE9境界半径

Firefoxで動作する次のものがあります。ChromeおよびSafari。ただしIE9では動作しません。tdの左上と右に丸い角を適用しています。何が欠けていますか？

border-left: solid 1px #444f82;
border-right:solid 1px #444f82;
border-top:solid 1px #444f82;
border-top-right-radius: 7px;
border-top-left-radius: 7px;
-moz-border-radius-topright: 7px;
-webkit-border-top-right-radius: 7px;
-khtml-border-radius-topright: 7px;
-moz-border-radius-topleft: 7px;
-webkit-border-top-left-radius: 7px;
-khtml-border-radius-topleft: 7px;
behavior: url(/survey_templates/PIE.htc);
html5css3internet-explorer-9
34
derekcohen

これをHTMLドキュメントの上部に持っていますか（<html>タグの上）

<!DOCTYPE html>

IE9では、Webサイトが新しいHTML5/CSS3を表示するためにこれが必要です

編集：または他の多くのDoctype（XHTMLなど。ただし、これは最も短く覚えやすいものです）

20
Adam Casey

私の知る限り、境界線の半径はIE9で動作するはずです。ページヘッダーにこれがない場合があります。

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

「エッジ」は「最新のレンダリングエンジンを使用する」という意味なので、IE 9は9を使用し、10は10を使用します。

75
kprobst

他の回答で言及されている原因に加えて、開発者ツールのCheck（F12）ドキュメントモードをInternet Explorer 9 Standardsに設定する必要があります

enter image description here

13
Shekhar_Pro

Explorer 9および8で次の機能を使用する場合：

<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
</head>
1
user1224025

ページヘッダーに<!DOCTYPE html>と<meta http-equiv="X-UA-Compatible" content="IE=Edge" />を追加して、問題を解決しました。 IE9でborder-radiusが機能しない場合は、ページヘッダーに<!DOCTYPE html>と<meta http-equiv="X-UA-Compatible" content="IE=Edge" />の両方を追加する必要があります。ページの上部に<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">がある場合は、IE9でボーダー半径がまだ表示されない可能性があるため、<!DOCTYPE html>に変更することをお勧めします

0
Omid