text-alignをjustifyに指定したulのテキストがEdgeとIEだけ均等割付になる時のcss対処法

web制作

読了の目安時間: 21

ulのli要素を両端揃えにできる「text-align: justify;」が便利なのですが、ブラウザチェックしたらEdgeとIEだけulのli要素にあるテキストまでもが両端揃えの均等割付になってしまいました。

原因を調べてみたところ、結論は「text-justify」の指定にあったようです。下記にまとめます。

text-alignをjustifyに指定したulのテキストがEdgeとIEだけ均等割付になる時のcss対処法

ulのテキストがEdgeとIEだけ均等割付に・・・?

ulのli要素のテキストが両端揃えの均等割付になったのが、こちら。

css-1

「タイトルが入ります」のテキストが両端揃えの均等割付になっています。この時に使用していたコードは下記です。


text-align: justify;
text-justify: distribute-all-lines;

これは他のcss記事から引用していたコードだったのですが、エラーの原因を調べてみると、「text-justify」の指定にあることが分かりました。

「text-justify」はIE(Edge)独自のもの

「text-justify」は、Internet Explorerが独自に採用したもので、text-alignプロパティの値がjustifyの時、テキストの均等割付の形式を指定する際に使用されるものということでした。

※参考「text-justify - 均等割付の形式を指定する(IE独自)」
http://weblan3.com/css/text-justify.php

この時、text-justifyのdistribute-all-linesがエラーの原因でしたので、これを調整すれば解決ということでした。

試しに削除してみたところ、ulのli要素のテキストが無事、左寄せに並んでくれました。

css-3

css-4

削除=autoの自動指定となるのですが、autoでなくても、distributeなどに変えてもOKです。

・・・どこで拾ってきたコードか忘れてしまいましたが、なぜ「distribute-all-lines」を指定していたのか、それは謎のままです。

まとめ

text-justifyは、IE独自ということで、同じMicrosoftの開発したブラウザ、Edgeにも適用されるようです。

IE用に指定していたものがEdgeにも反映されてしまいますので、css制作の際は注意しましょう!

キヨタツ
キヨタツの一言

Edgeさん、あんまり好きになれないんですよね。。。

今読んだ記事をシェアする

thumb_css

text-alignをjustifyに指定したulのテキストがEdgeとIEだけ均等割付になる時のcss対処法

  • このエントリーをはてなブックマークに追加
  • Pocket

このブログサイトが参考になった人は、いいねボタン! 更新情報も受け取れます!

arrow
デル株式会社
  • Pocket
  • このエントリーをはてなブックマークに追加

キヨタツ

キヨタツ

WEBを中心に、色々な制作をする個人事業主です。過去、エンジニア&webディレクターで会社勤めをしていました。主に要件定義や構築が得意で、HTML/css/javascript/PHP/git/wordpress/MT/DB/photoshop/illustrator/fireworksなど扱えます。現在、サーバー・アプリなどを習得中です。性格は、自虐好きです。