0

動的に生成されたいくつかの画像があります：

<div class="image">
<?php echo "<img class='logo_client' src='img/clients/".$row['logo_name'].".jpg''>"; ?>
</div>

そして、CSSに次のように角を丸くしたいと思います：

.image {
padding: 0;
width: 100px;
height: 100px;
overflow: hidden;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px; 
border-radius: 10px;    
behavior: url(css/PIE.php);
}

Firefox、Chrome、IE9 では角が丸くなっていますが、IE8 では機能しません。PIE は、すでに IE8 の他の要素と連携しています。

誰かがそれが何であるか知っていますか?

どうもありがとうございました

4

2 に答える 2

0

IE8以下で丸みを帯びた角を機能させることを私が知っている唯一の方法は、次のようなコードを使用することです。

<div class="image">
   <span class="tl"></span>
   <span class="tr"></span>
   <span class="br"></span>
   <span class="bl"></span>
</div>

そして、次のようなCSSを使用します。

.image { position: relative; }
.tl, .tr, .br, .bl { position: absolute; }
.tl { left: 0; top: 0; width: 20px; height: 20px; background: url(/images/tl.png) no-repeat top left; }
.tr { right: 0; top: 0; width: 20px; height: 20px; background: url(/images/tr.png) no-repeat top left; }
.br { right: 0; bottom: 0; width: 20px; height: 20px; background: url(/images/br.png) no-repeat top left; }
.bl { left: 0; bottom: 0; width: 20px; height: 20px; background: url(/images/bl.png) no-repeat top left; }

ここで、背景画像はその角に対応する丸い角のすべての画像です。たとえば、右下隅の背景画像は次のようになります。

http://www.webcredible.co.uk/i/br2.gif

そして1つ（それが理にかなっていることを願っています）

上記の方法は少し面倒で、特にクリーンではないため、これを行うためのより良い方法があるかもしれません。

そうは言っても、IE8以下で丸みを帯びた角を機能させる方法が特に「クリーン」になるとは思えません。私は通常、IE8以下を丸みを帯びた角なしで残しますが、他のブラウザーと比較して、7と8を使用する人はそれほど多くありません。

編集：

もし私があなたなら、この「振る舞い：url（css / PIE.php）;」のようなコードを避けたいと思います。IEの動作は他のブラウザではサポートされていません。Microsoftでさえあきらめたと思います。

于 2012-08-05T14:39:12.850 に答える
0

最後に、CSS3PIEで動作するようにしました。丸みを帯びた角は、IE7、IE8、およびその他すべてのブラウザーで表示されます。コーディングミスでした、ごめんなさい。

于 2012-08-07T09:32:29.313 に答える