Firefox または IE_HTML/Xhtml_Webpage Production において、span で幅を決定できない問題の解決策-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

Firefox または IE_HTML/Xhtml_Webpage Production において、span で幅を決定できない問題の解決策

May 16, 2016 pm 04:37 PM

span width 幅

コードをコピー

コードは次のとおりです:

<html xmlns="http :/ /www. w3.org/1999/xhtml " >
<head>
<title>テストスパン</title>
<mce:style type="text/css"> <! --
span {
background-color:#ffcc00;
}
--></mce:style><style type= "text/css" mce_bogus="1">span {
background-color:#ffcc00;
width:150px;
</head > 🎜><body>
固定 <span >width</span>
</html> テストに合格した後、FirefoxでもIEでも動作しないことが判明しました。

CSS2 標準の幅の定義を調べると、CSS の元の幅属性が常に有効であるとは限らないことがわかりました。オブジェクトがインラインオブジェクトの場合、幅属性は無視されます。 Firefox と IE は当初、標準に従ってこれを行っていました。

スパンをブロックタイプに変更し、float を設定することは完全な解決策ではありません

スパンの CSS に表示属性を追加し、幅が次のようにブロックタイプ要素にスパンを設定します。正しいです。これは機能しますが、前後のテキストが別の行に分離されてしまいます。このようにして、span は実際には div になります。

コードをコピーします

コードは次のとおりです:

span {background-color:多くの人は、特定の条件下で問題を解決できる別の CSS 属性 float を追加することを提案します。たとえば、この例では、span の前にテキストがない場合、実際に実行可能です。ただし、存在する場合は、前後のテキストが結合され、span は 2 行目まで実行されます。

コードをコピーします

コードは次のとおりです:

span {background-color: #ffcc00;

display:block; float:left; width:150px;}

スパン幅を設定するための完璧なソリューション

次のコードは完璧です。スパン幅の設定の問題を解決しました。ブラウザは通常、サポートされていない CSS プロパティを無視するため、Firefox で将来の Firefox 3 に達した場合にこの行が機能するように、最後に display:inline -block 行を記述するのが最善です。このコードはさまざまなバージョンと互換性があります。同時に。

コードをコピー
コードは次のとおりです:

<!DOCTYPE html PUBLIC "-/ /W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head><title>テストスパン</title> <mce:style type="text/css">< ;!- - span { 背景色:#ffcc00; 表示:-moz-inline-block; 幅:150px;} --></mce:style> <style type="text/css" mce_bogus="1">span {background-color:#ffcc00; display:inline-block;}< ;/style>

<body>

</body> 🎜>

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。