Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

アイコンの中身が外側にはみ出すなどして形が壊れている

概要

 アイコンの中身が外にはみ出して形が崩れてしまいます。

表示画面

要因

 複数の要因が考えられますが、代表例として以下があります。

  1. アイコンの横幅指定が誤っている
    アイコンの横幅指定が画面横幅を超えて指定されている為、画面の外にアイコンがはみ出してしまい、形が崩れています。
    横幅にmax-widthプロパティを指定した場合、横画面表示時のサイズで指定されてしまうため、横幅が可変した場合に対応できません。

     
      img {
    	max-width: 100%;
    	height: auto;
    	vertical-align: middle;
    	border: 0px none;
      }				

     

  2. ベンダープレフィックス
    他のブラウザで正しく表示出来ているが、Firefoxで表示が崩れている場合は、ベンダープレフィックスの指定が入っていることが考えられます。
    -webkit-background-sizeプロパティ等の指定で表示領域を設定していると、Firefoxでは認識できず、指定されていない状態になっています。

     
      h3 {
    	padding: 10px 40px 10px 10px;
    	background: url(/images/open.gif) no-repeat 98% 50%;
    	-webkit-background-size: 21px 21px;
    	font-weight: bold;
    	font-size: 12px;
    	cursor: pointer;
      }			

     

解決策

 各要因の解決策の代表例として以下があります。

  1. アイコンの横幅指定が誤っている
    max-width: 100%; で指定されている場合は、横画面表示時のサイズで指定されてしまうため、width: 100%; に修正することで縦画面表示のサイズにも対応できます。

     
      img {
    	width: 100%;
    	height: auto;
    	vertical-align: middle;
    	border: 0px none;
      }				

     

  2. ベンダープレフィックス
    webkit指定が入っている場合は、他ブラウザ互換用に別途指定を行う必要があります。
    -webkit-background-sizeプロパティの場合は、background-sizeプロパティを追記することでFirefoxでも指定を行うことができます。
    引数は同様のものが使用可能です。

     
      h3 {
    	padding: 10px 40px 10px 10px;
    	background: url(/images/open.gif) no-repeat 98% 50%;
    	-webkit-background-size: 21px 21px;
    	background-size: 21px 21px;
    	font-weight: bold;
    	font-size: 12px;
    	cursor: pointer;
      }				

     

メリット

 ・画面サイズの可変に対応可能となります。
 ・他のブラウザでも互換性を維持することができます。

戻る

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: wtrfp
 最終更新者: wtrfp,