0

私はテーブルを持っており、その中にcss3を介して各td要素の角を丸くしようとしています。これは Firefox、Chrome、Safari では機能しますが、Opera と IE9 では機能しません。IE9でこれを機能させる必要があるだけです。誰かが私が間違っていることを知っているかもしれません。たくさんあるので、コードの一部を提供します。

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=1024">
</head>

<div class="timeline_page_wrapper">

<div class="wrap">
<table class="events_table">

<tr>
<th id="oct12">October</th>
<th id="nov12">November</th>
<th id="dec12">December</th>
<th id="jan13">January</th>
</tr>

<td class="event fn_milestone fn_healthcare fn_regulation fn_priority_med  priority2 ">
<a class="inline-cBox" href="#milestone_3">
<div class="content">Again, Not Very Important</div>
    <div class="lower">
<hr>
<span class="date">10.2012</span>
<span class="type">Regulation</span>
    <img src="http://policyapp.beamland.com/img/icon-medical.png" alt="" height="21px" />
</div>
</a>
</td>

そしてCSS：

td.event {
-webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius:12px;
    -o-border-radius:12px;
    border-radius: 12px;
    -webkit-box-shadow:
    0 1px 2px #fff, /*bottom external highlight*/
    1px 1px 1px #666, /*side right external shadow*/
    inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/
    inset 0 1px 1px rgba(255,255,255,0.8), /*top internal highlight*/
    inset -1px 1px 1px rgba(0,0,0,0.5); /*side right internal highlight*/
    box-shadow:
       0 1px 2px #fff, /*bottom external highlight*/
       1px 1px 1px #666, /*side right external shadow*/
       inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/
       inset 0 1px 1px rgba(255,255,255,0.8), /*top internal highlight*/
       inset -1px 1px 1px rgba(0,0,0,0.5); /*side right internal highlight*/
    behavior: url('../pie/PIE.htc');
   }

IE9 の Web インスペクターを見ると、適用されている境界線が表示されますが、表示されません。どんな助けでも大歓迎です。

4

2 に答える 2

1

質問したときにCSSが足りなかったので、自分の質問に答えます。どうやらIE9は、グラデーションと丸みを帯びた角を同時に使用することを好まないようです。それは私が抱えていた問題でしたが、気づいていませんでした。そこで、無地を使用するだけでこれを解決し、丸みを帯びた境界線が表示されます。

于 2012-10-04T21:40:56.087 に答える
0

追加するだけ

border-radius: 12px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;

E9 は default を使用するborder-radiusため、ボーダー半径を呼び出すすべてのスタイルにそれを含めるようにしてください。これで、サイトは IE9 に対応する準備が整います。

-moz-border-radiusは Firefox 用、-webkit-border-radiusは Safari および Chrome 用です。

さらに、IE コーディングが ie9 であることを宣言することを忘れないでください。

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

IE8 では予定されていません。CSS 互換性ページを参照してください。

于 2012-10-03T15:26:24.490 に答える