PR

display:blockで消した要素の高さが残ってしまう時の解決方法

スポンサーリンク

CSSで以下のように設定し、あるブロック要素を見えないようにした。

#hoge {display: block;}

しかし、
正常にブロック要素が消えたはいいが、IE11や一部Androidブラウザで高さが残ってしまい、それ以降のレイアウトが崩れてしまった。

 

で、その解決方法として見つけたのが以下。

#hoge{
	display: block;
	visibility: hidden;
	content: ".";
	font-size: 0.1em;
	line-height: 0;
	height: 0.1px;
}

要は、高さを持ちそうな要素をすべて排除したわけだ。
(正確には若干高さは残っている事があるが、視覚的には分からない程度)

 

コメント