ウェブ系

【IE11】border-radiusで角丸にすると隙間が出来るバグ

ウェブでボタンなどの角を丸めたいとき、CSSの「border-radius」プロパティを使うことが多いと思います。
このborder-radiusプロパティ、IE11ではちょっとしたバグあるようで注意が必要です。

「IE11」でborder-radiusを使うと変な隙間(線)が出来る

borderを指定せず、border-radiusを設定すると、IE11で表示した場合は隣接した要素間に隙間が生まれます。(ボーダーのような感じ)
それでは、実際に見てみましょう。
下の項目はChrome等では問題ないですが、IE11だと項目1と項目2の間に薄っすらと線が見えると思います。

  • 項目1
  • 項目2

IE11で上の項目を表示した場合
IE11でborder_radiusした時の見た目

解決策は・・・

完全な解決策はありません。バグ仕様です。
ネガティブマージンだとか強引に見えなくするようなことは出来ますが、構造やCSSを見直しましょう。
上の例ならば、ボーダーを背景と同じ色で設定してあげれば解決しそうですね。borderの分、ちょっと調整が必要ですが。
横並びのナビメニューなどでこの問題が起きた場合には画像化してしまうのも一つの手ですね。
また、IE11はサポート期限も近付いており、Microsoftも「Edge」の使用を推奨しています。最早モダンなブラウザとは言い難いため気にする必要もないかも知れません。

「IE」のユーザー数はまだ多い(2020年7月現在)

現在、「IE」ユーザーは約10%ほどいるようで「Edge」よりも多い状況です。
デスクトップブラウザのシェアは、
1位:Chrome:58.67%
2位 Safari:9.67%
3位 IE:9.46%
この状況を踏まえて、対応するかどうか考えましょう。
202007PCブラウザシェア

今買うべき!最強のキーボード&マウスはこれだ!【MX Keys, MX Master 3】前のページ

「Cocoon」本文の上下両方にカテゴリやタグを出す方法次のページ

関連記事

  1. ウェブ系

    「Cocoon」本文の上下両方にカテゴリやタグを出す方法

    今日は無料なのに高機能、WPテーマ「Cocoon」のカテゴリ・タグ表示…

  2. WordPress

    「SiteGuard WP Plugin」を入れよう【WordPressのセキュリティ対策①】

    こんばんは。WordPressはデフォルトのままだと「/wp-lo…

  3. ウェブ系

    「Cocoon」のサイドバーでモバイル用の広告ウィジェットを表示させる方法

    こんばんは。WPテーマで有名な「Cocoon(コクーン)」は、モバ…

  4. WordPress

    「WordPress」導入から初期設定まで

    Webサイトを作りたいけど、どうやっていいか分からない・・・・。そんな…

  5. ウェブ系

    ウェブサイトを常時SSL化!httpsを強制する方法

    Googleは常時SSL化をすすめています。ウェブサイトやブログを作っ…

  6. WordPress

    予約投稿が動かない。そんなときは「wp-cron」を確認しよう。

    こんばんは。WordPressでせっかくサイトを作ったのに、予約投…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

PAGE TOP