差異対CSSの比較？

まだ新しいサイトのナビゲーションコントロールを私が望むように動かそうとしています。差異対CSSの比較？

は、私は、コードのこの部分に私の問題を単純化：

enter image description here

しかし、スパンがUmbracoでXSLTから生成されています

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
    <style> 
     span { display: inline-block; height: 50px; vertical-align: top; background-color: Yellow; } 
     span.block { background-color: Red; width: 15px; } 
    </style> 
</head> 
<body> 
    <span class="block"></span><span>A B C D</span> 
    <span class="block"></span><span>E F G H</span> 
</body> 
</html>

このコードはにレンダリングします。ソースは<スパン> < /スパン>を述べたとしても、それを生成<スパン/このような>：

enter image description here

は、なぜそれがこれをやっている：

<span class="block" /><span>A B C D</span> 
<span class="block" /><span>E F G H</span>

このコードはにレンダリングしますか？

<スパン> < /スパン>と<スパン/ >の違いは何ですか？

PS：実際には、XSLTはメニュー項目を使ってulにレンダリングします。ブロックスパンはレイアウト目的のために存在します（背景イメージ）。そのため、寸法はありますが内容はありません。

出典

2012-02-07 NetWave

HTMLに自己閉鎖スパンタグが存在しないため、ブラウザはHTMLを無効なHTMLとして解釈し、あなたの意図を推測します。あなたはその後、ウェブを使用する要素を点検選択、テストページを右クリックして、そのことを確認することができます

<span class="block"><span>A B C D</span> 
<span class="block"><span>E F G H</span></span></span>

：として

<span class="block" /><span>A B C D</span> 
<span class="block" /><span>E F G H</span>

：この場合

、それはおそらく、この治療されますツールがインストールされている場合はFirebugです。 inspectorは、ブラウザが解釈したHTMLツリーを表示します。

出典

2012-02-07 22:56:00 Douglas

必ずしもそうではありません - それはDOCTYPEに依存します - http://stackoverflow.com/questions/2816833/can-a-span-be-closed-using-spanを参照してください。ちょっとした楽しみのために、元の質問の幅ではなく、スパンの高さを設定してみてください（少なくともIEでは！）。ブロックレベルの要素は、高さがなければ空であればレンダリングすべきではありませんが、スパンであるという事実は複雑です。 HTMLパーザを書くことは楽しいものでなければなりません！ – dash

@dash：この例では、ページをhtmlではなくxhtmlとして扱うようブラウザに指示しています。そのため、NetWaveがXSLTを修正できない場合、解決策になる可能性があります。私はそれに依存する前にブラウザのサポートを再確認したいと思う、私はhtml5ソリューションを好むだろう。 – Douglas

XSLTを変更して、などのレンダリングを行うのが簡単な解決策です。 XSLTを見ることなく、知るのは難しいです。空ではあるが高さが指定されている場合は、OPが望むように動作するDIVの要素に変更します。 – dash

レイアウト目的でブロックを使用する必要がある理由を理解できません。ちょうどクラスを（またはおそらくより適切には<div>）に追加し、左パディングと背景イメージを適用するのはなぜですか？

.my-class { 
    padding-left: 15px; 
    background: url(images/my-image.png) no-repeat 0 50%; 
}

出典

2012-02-08 02:07:44 justrhysism

実際、私はすでにこれをやっていますが、私は反対側にも同じ効果が必要です。可変幅の丸い角を持つタブを考えてみましょう。あなたのコードでは、1つのコーナーしか表示できません。他のコーナーで使用されているスパンは私の例です。 – NetWave

デザインの丸みを帯びたコーナーの重要性（時には私たちは選択肢がありません）にもよりますが、私は、 justrhysism

差異<span></span>対CSSの比較<span/>？

答えて

差異<span></span>対CSSの比較<span/>？

答えて

関連する問題