ど素人から毛を生やす。<延>

スマホでoverflow:hiddenが効きらなかった件

Web > css 2014年7月14日(最終更新:3年前)

このページは2014.7.14に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。
目がヤバい餅。です。

本気で仕事からちょっと離れて森の中にでもダイヴしてきた方が良いかもしれません。
うーん、学生の頃はこんなことなかったのに。やっぱ「毎日」ってのがやヴぁいpointでしょうか。

 

それはともかく、今日はCSSの話。

既存のコーディングでCMSテンプレートを作ったのですが、問題がひとつ発生していました。

inline-blockの内容がCMSによって可変、
しかしinline-blockのサイズは一定でなければならず、
overflow:hiddenを設定することで、はみ出した分を非表示にする処置を取りました。

しかし、実機で見ると、inline-blockの中身こそhiddenされていますが、
何故か高さ情報だけがhiddenされておらず、それによりレイアウトが崩れていました。

色々試したのですが、抜本的な解決策は見つけられず。
親要素をposition:relativeし、inline-blockをposition:absoluteすることで解決。

スマホサイトのコーディングにおいては、
overflow:hiddenで高さ情報を消しきれないときがあると
覚えていた方が良いかもしれません。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)