0

IE8 およびすべての主要なブラウザーには、曲線の縁取り CSS が必要です。現在、私はCSS PIEを試しています

jsfiddle のデモはこちらです。ただし、回答者には、ここからPIE.htc ファイル フォームをダウンロードし、HTML をスタンドアロン ページとして試して、IE8 で実際の効果を得ることをお勧めします。

私の問題は、<td>jsfiddle の IE8 で「登録していただきありがとうございます」というテキストが曲がっていないことです。HTMLページとして実行すると、IE8では曲がっていますが、青い背景が「登録していただきありがとうございます」と重なっています<td>（ただし、背景は「#f2f2f2」です）。

    <table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin:0px; padding:0px;">
        <tr>
            <td>&nbsp;</td>
            <td style="width: 60%; text-align: center;background: #0067C8;">
                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                    <tr>
                        <td colspan="3" style="height: 50px; background-color: #262626; width:100%; text-align: left;">
                            <img src="twitter_logo.png" width="200" height="50" alt"Twitter" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" style="height: 25px;">&nbsp;</td>
                    </tr>
                    <tr>
                        <td style="width:3%;">&nbsp;</td>
                        <td style="width: 94%; background-color: #f2f2f2; height: 400px; font-family: arial; font-size: 30px; color: #2DB8ED; text-align: center; border: 2px solid #bcbcbc;text-align: center;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; behavior: url(PIE.htc);">
                            Thank you for registering
                        </td>
                        <td style="width:3%;">&nbsp;</td>
                    </tr>
                    <tr>
                        <td colspan="3" style="height: 25px;">&nbsp;</td>
                    </tr>
                </table>
            </td>
            <td>&nbsp;</td>
        </tr>
    </table>
4

3 に答える 3

1

追加してみてください

position:relative;
z-index: 0;

IE8のborder-radiusにCSS3Piehtcを使用する

またはCSS3PIE-IEボーダー半径サポートを提供していませんか？

于 2012-04-10T07:44:37.517 に答える
1

http://jquery.malsup.com/corner/ jquery プラグインを試して曲線を追加しましたか?

$(function () {
   $('table table tr:eq(2) td:eq(1)').corner();
});

デモ: http://jsfiddle.net/bDvRd/4/

于 2012-04-10T07:17:24.763 に答える
1

主にz-indexの問題が原因だと思います。

詳しくはこちらをご覧ください。PIE の使用時に発生する一般的な問題

于 2012-04-10T07:30:52.583 に答える