•  09-06-2019
  •  | 
  •  

質問

CSSを使用して、FirefoxでSPANタグの高さを指定しようとしていますが、受け入れられません（IEはおかしくなります）。

DIVを使用する場合、Firefoxは高さを受け入れますが、DIVを使用する場合の問題は、その後の迷惑な改行です。これは、この特定のインスタンスではできません。

CSVスタイル属性の設定を試みました：

display: inline
DIVに対して、FirefoxはとにかくSPAN動作に戻るようで、高さ属性をもう一度無視します。

役に立ちましたか？

解決 

<style>
#div1 { float:left; height:20px; width:20px; }
#div2 { float:left; height:30px; width:30px }
</style>

<div id="div1">FirstDiv</div>
<div id="div2">SecondDiv</div>

divの1と2を保持するもののコンテナが、それらが収まるのに十分な幅がある限り、これは問題ないはずです。

他のヒント

display：inline-block に任意の要素を設定して、高さまたは幅を受け取ることができます。これにより、他の「ブロックスタイル」を適用することもできます。要素に。

ただし、Firefox 2はこのプロパティをサポートしていないことに注意する必要があります。 Firefox 3は、このプロパティをサポートする最初のMozillaベースのブラウザーです。 Internet Explorerを含む、他のすべてのブラウザーはこのプロパティをサポートしています。

inline-block では、互換モードで実行している場合、Firefoxの要素内でテキストの配置を設定できないことに注意してください。私が知る限り、他のすべてのブラウザはこれを許可します。互換モードで実行中にテキストの配置を設定する場合は、 inline-block ではなく、プロパティ -moz-inline-stack を使用する必要があります。これはMozillaのみのプロパティであるため、Mozillaのみがこれを取得するようにブラウザーを検出する必要がありますが、他のブラウザーは標準の inline-block を取得する必要があります。

インライン要素は、そのような高さ（または幅）を持つことはできません。 SPANはデフォルトですでに display：inline です。この場合、Internet Explorerは実際には壊れたブラウザーです。

インラインで表示するため、高さはline-height属性の高さに設定する必要があります。

レイアウトの方法によっては、span / divで常にfloat：leftまたはfloat：rightを使用して、改行を防ぐことができます。ただし、文の途中で必要な場合は、そのオプションは使用できません。

問題は、「display：inline」は関連する高さを取得できないことです。インラインであるため、コンテンツから高さが取得されるためです。とにかく、行末で壊れているボックスの高さをどのように定義しますか？

代わりに 'line-height'を設定しようとするか、満足のいく結果が得られない場合は、パディングを設定します。

/* makes the whole box higher by inserting a space between the border and the content */
padding: 0.5em 0;

display：block; に設定されている場合、span要素の高さ（および幅）のみを変更できます。これは通常、インライン要素であるためです。 div は通常 display：block; に設定されています。

解決策は以下を使用することです。

<div style="background: #f00;">
    Text <span style="padding: 14px 0 14px 0; background: #ff0;">wooo</span> text.
</div>

Firefoxでスパンの高さを設定するには次のようにします

span {
  display: block;
  height: 50px;
}

要素内のテキストの配置は、パディングおよびブロックインライン属性を使用して調整できます。 display：inline-block; padding-top：3px;たとえば

em の

height = 相対線の高さ

たとえば、 line-height：1.1 を含む height：1.1em

= 100％埋め

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top