IE11でのみ疑似要素で表示している画像がずれる

前提・実現したいこと

Chrome、Firefoxでの表示はうまくいったのに、IE11で表示がおかしくなってしまいます。

ChromeとFirefoxでは、
「　　　　　★○○○　　　　　　」
のように、センタリングしたh3の直前に画像が表示されていますが、
IEでは、
「★ 　　　　○○○　　　　　　」
と、文字だけがセンタリングされ、画像は左寄せになっています。

IEでも画像をh3の文字の直前に表示されるようにしたいのですが、どうすれば良いのでしょうか。
調べてはみたのですが、調べ方が悪いのか同じような例が見当たらずに悩んでいました。

IEで検証してみたところ、beforeの行すべてに線が引かれており効いていないようでした。
（でも画像は表示されているのに…？）

該当のCSS

.center{
text-align: center;
}
.mark{
position: relative;
margin-left: 40px;
}
.mark:before{
position: absolute;
content: url("mark.png");
margin-left: -40px;
}

html

行動規範の内容に同意します

回答2件

ベストアンサー

positionはいらないですね。.markの:beforeだけでできるので、.markにかかっているCSSはいりません。

css
1.center{
2  text-align: center;
3}
4.mark:before{
5  content: url("mark.png");
6  display: inline-block;
7  width: 1em;
8  margin-left: -1em; /* 自身の幅だけネガティブマージン。「beforeの要素も含めてh3をセンタリング」ならこれはいらない。 */
9}

ちなみにpositionは、topやleftなど入れないとブラウザごとに基点が異なります。

投稿2019/03/04 08:47

編集2019/03/04 12:59

kszk311

総合スコア3404

hiroka.taka.s

2019/03/05 02:41

できました！！！！ positionがなければいけないものと思っていました… ずぶずぶの素人にこんなに素早い回答をくださいまして、大変ありがとうございました^^

行動規範の内容に同意します

「kszk311」さんと同じ意見です。「vertical-align: middle;」を使った場合です。

CSS
1.center {
2  text-align: center;
3}
4
5.mark::before {
6  content: url(mark.png);  /* ←「""」削除してOK */
7  vertical-align: middle;
8  margin-right: ○○px;    /* ← 任意の余白・単位 */
9}