IE8対応のボーダー半径処理方法

IE8対応のボーダー半径処理方法

canisue (http://caniuse.com/#search=border-radius) によると、border-radius の互換性は次の図に示されています。

テストコード:

<!DOCTYPE html>
<html>

    <ヘッド>
        <メタ文字セット="UTF-8">
        <meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1">
        <タイトル></タイトル>
        <スタイル タイプ="text/css">
            * {
                マージン: 0;
                パディング: 0;
            }
            
            #ヘッダー{
                幅: 400ピクセル;
                高さ: 400px;
                マージン: 10px;
                境界線の半径: 10px;
                境界線: 1px 実線の赤;
            }
        </スタイル>
    </head>

    <本文>
        <div id="ヘッダー">
        </div>
    </本文>

</html>

IE8ブラウザの影響:

border-radius は IE8 ブラウザと互換性があります:

<!DOCTYPE html>
<html>

    <ヘッド>
        <メタ文字セット="UTF-8">
        <meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1">
        <タイトル></タイトル>
        <スタイル タイプ="text/css">
            * {
                マージン: 0;
                パディング: 0;
            }
            
            #ヘッダー{
                幅: 400ピクセル;
                高さ: 400px;
                マージン: 10px;
                境界線の半径: 10px;
                境界線: 1px 実線の赤;
                /*キー属性の設定にはパスの設定が必要です*/
                動作: url(PIE.htc);
            }
        </スタイル>
    </head>

    <本文>
        <div id="ヘッダー">
        </div>
    </本文>

</html>

IE8ブラウザでの効果:

PIE.HTC ダウンロード アドレス: http://css3pie.com/

PIE は次のような CSS3 プロパティを処理できます。

IE8: 互換性は主に次のとおりです。

(1) CSS3属性はサポートされていません。CSS3効果を実装するにはPIE.jsが使用されます。

（２）メディアクエリ

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  コンテンツタイプの説明、つまりHTTPリクエストヘッダーのタイプ

>>:  ウェブデザインにおける装飾要素の応用の概要

推薦する

MySQL インデックス データ構造の詳細な分析

目次概要インデックスデータ構造バイナリツリー赤黒木BツリーB+ツリーハッシュ索引InnoDB インデ...

Docker ベースの ELK ログ システムを構築する方法

背景要件:ビジネスがどんどん大きくなると、サーバーの数も増え、さまざまなアクセスログ、アプリケーショ...

CSS ブラウザ互換性の問題に対する 4 つの解決策

フロントエンドは、技術が急速に進化するだけでなく、知っておくべき事柄が多すぎるという理由で大変な仕事...

JavaScriptの詳細な分析と方向の変更方法

目次これ方法オブジェクト内これを隠した厳密モードこれを変更してこれいつものように、まずはコードを見て...

Vue フロントエンドで PDF を生成してダウンロードする方法

目次1. インストールと導入2. PDFファイルをパッケージ化してエクスポートする方法構成の詳細PD...

JavaScript でプロトタイプ パターンを実装する方法

概要プロトタイプ パターンは、プロトタイプ インスタンスによって作成されるオブジェクトの型を指し、こ...

HTML テーブル境界コントロールの詳細な説明

上の境界線のみを表示する <table frame=above>下の境界線のみを表示する...

デカルト積原理を使用してMySQLで複数のテーブルをクエリする方法を簡単に説明します。

MySQL マルチテーブルクエリ (直積原理)まず、データが使用するテーブルを決定します。デカルト...

MySQLデータベースの数千万件のデータクエリとストレージの詳細な説明

目次百万レベルのデータ処理ソリューションデータストレージ構造設計クエリステートメントの最適化1000...

Mysql ルートユーザーアカウントのパスワードをリセットする問題を解決する

問題の説明: mysqladmin.exe を使用してコマンドを実行すると、次のエラー メッセージが...

docker-compose が遅すぎる場合の解決策の詳細な説明

解決策はただ一つ、ソースを変更することです。 github からのソースは基本的にタイムアウトするの...

CSS3を使って歌詞進行テキストカラー塗りつぶし変更の動的効果を実装するアイデアの詳細な説明

音楽を再生すると、曲が進むにつれて歌詞が徐々に色づきます。色は単語ごとに変わるのではなく、左から右へ...

ネイティブWeChatアプレット開発におけるreduxの使用の詳細な説明

前提複雑なシナリオでは、複数の異なるページ間で大量のデータを使用したり変更したりする必要があります。...

MySQL Community Server 5.7.16 のグリーン バージョンをインストールしてリモート ログインを実装する方法

1. MySQL Community Server 5.7.16をダウンロードしてインストールします...

keepalived+nginx の高可用性を実装する方法の例

1. keepalived の紹介Keepalived は、もともと LVS クラスタ システム内の...