2009-04-14 150 views
39

我知道在一個內聯元素中放置一個塊元素是錯誤的,但以下情況如何?如果塊元素包含另一個塊元素,將塊元素更改爲內聯CSS是錯誤的嗎?

想象一下這樣的有效的標記:

<div><p>This is a paragraph</p></div> 

現在添加這個CSS:

div { 
    display:inline; 
} 

這產生了一個內聯元素包含塊元素的情況下(在div成爲內聯和p是塊默認)

頁面元素仍然有效嗎?

如何判斷HTML是否有效 - 在應用CSS規則之前還是之後?

更新:我因爲了解到,HTML5是完全有效的把鏈接標記例如內塊級元素:

<a href="#"> 
     <h1>Heading</h1> 
     <p>Paragraph.</p> 
</a> 

如果你想HTML中的大塊其實,這是非常有用的成爲一個鏈接。

+2

我很高興html5認爲這個有效,但有效的代碼並不是最終所有的網絡。谷歌使用的代碼看起來像可怕的碎標籤湯,但它的工作原理。 – JKirchartz 2012-02-10 21:06:19

回答

22

CSS 2.1 Spec

當inline框包含一個在流塊級框,內聯框(和相同的行框內的內聯祖先)圍繞塊級框破(以及僅由可摺疊空白和/或不流動元素連續或分隔的任何塊級別的同胞),將內聯框分成兩個框(即使任何一邊都是空的),框的兩邊各一個電箱(es)。休息之前和休息之後的線框包含在匿名塊框中,並且塊級框成爲這些匿名框的兄弟。當這樣的內聯框受到相對定位的影響時,任何生成的轉換也會影響內聯框中包含的塊級框。

該模型將適用於下面的例子中,如果下面的規則:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<HEAD> 
    <TITLE>Anonymous text interrupted by a block</TITLE> 
</HEAD> 
    <BODY> 
    <P> 
     This is anonymous text before the SPAN. 
     <SPAN>This is the content of SPAN.</SPAN> 
     This is anonymous text after the SPAN. 
    </P> 
    </BODY> 

的P元素包含匿名文本塊(C1):

p { display: inline } 
span { display: block } 

用此HTML文檔中使用接着是塊級元素,後面是另一個塊(C2)的匿名文本。結果框將是代表BODY的塊框,其中包含圍繞C1的匿名塊框,SPAN塊框以及圍繞C2的另一個匿名塊框。

匿名框的屬性是從封閉的非匿名框(例如,在子部分標題「匿名塊框」下面的示例中,DIV的框)繼承的。非繼承屬性具有初始值。例如,匿名框的字體是從DIV繼承的,但邊距將爲0.

對導致生成匿名塊框的元素所設置的屬性仍適用於該元素的框和內容。例如,如果在上例中在P元素上設置了邊框,則將圍繞C1(在行的末尾打開)和C2(在行的開頭處打開)繪製邊框。

一些用戶代理已經以其他方式在包含塊的內聯上實現了邊界,例如,通過在「匿名線框」內包裝這些嵌套塊並因此在這些框周圍繪製內聯邊框。由於CSS1和CSS2沒有定義這種行爲,僅CSS1和CSS2的用戶代理可以實現這種替代模型,並且仍然聲稱符合CSS 2.1的這一部分。這不適用於本規範發佈後開發的UA。

這就是你會的。很明顯,行爲是在CSS中指定的,儘管它是覆蓋所有情況還是在當今的瀏覽器中一致地實現尚不清楚。

-1

我想,(x)html是有效的,css是有效的。結果是否有效?是的,如果它是在你想要的瀏覽器中查找。

+0

使用瀏覽器驗證代碼的問題是,您需要在每個希望網頁工作的系統上的每個瀏覽器的每個新版本重新驗證頁面...... – Guffa 2009-04-14 07:37:22

+0

是的,這是真正的問題,我知道。 瀏覽器不驗證:)我認爲,關於HTML + CSS結果驗證的問題是一個品味問題。人的因素。 – 2009-04-15 10:33:45

15

無論是否有效,元素結構都是錯誤的。之所以不將塊元素放在內聯元素中,是因爲瀏覽器能夠以易於預測的方式呈現元素。

即使它沒有違反HTML或CSS的任何規則,它仍會創建無法按預期呈現的元素。瀏覽器必須處理這些元素,就像HTML代碼無效一樣。

+3

那麼當你需要表中的整行可點擊時,你會做什麼? – mgPePe 2012-03-10 18:57:20

+2

@mgPePe:有幾個選項。您可以在該行的每個單元格中放置一個鏈接,您可以使用Javascript來捕捉該行的單擊事件,也可以使用與表格不同的內容。 – Guffa 2012-03-11 12:42:24

2

HTML驗證獨立於CSS,因此頁面仍然有效。我相當肯定CSS規範也沒有提到這個問題,但是不要在那個引用我。不過,我會非常小心地使用這樣的技術,因爲雖然它可能會在某些瀏覽器中按照預期呈現,但您仍然需要全部測試 - 我沒有看到許多保證。

5

HTML和CSS都將仍然有效。理想情況下,你不需要做這樣的事情,但是CSS的這一特定位置實際上是一個方便(在語法上有效但在語義上無效)的方法,用於獲取Internet Explorer的雙重保證金錯誤,而不訴諸條件樣式表或黑客將無效你的CSS。 (X)HTML比CSS有更多的語義值,所以CSS在語義上是有效的並不重要。在我看來,這是可以接受的,因爲它解決了一個惱人的瀏覽器問題,而不會使代碼失效。

1

頁面元素仍然有效嗎?

在HTML意義上的「有效」,是的; HTML對CSS一無所知。

然而,你在瀏覽器中獲得的渲染是由CSS規範'未定義'的,所以它可能看起來像任何東西。雖然您可以在針對特定瀏覽器(您知道瀏覽器如何呈現此案例)的CSS黑客中包含這樣的規則,但不應將其用於瀏覽器。

-1

不,這不是一個錯誤的選擇。我們可以按照要求使用。

-1

如果你有一個邏輯你遵循,你最終實現它像這樣,它不是錯誤的。僅僅因爲它們很奇怪,工作並不是「錯誤的」。是的,這是非常不尋常的,但它幫助,這不是一個錯誤。這是故意的。 HTML和CSS應該爲你服務,而不是其他方式,所以千萬不要聽評論,告訴你不要因爲它很醜而不去做。

通常將解決方案稱爲「無效」,並在該區塊周圍提出長遠建議。有時你可以重新思考你做了什麼。但是,你做了什麼可能有很多原因,他們不認爲它們。

我確實在內部使用內嵌塊。它是有效的,它的工作原理 - 在大多數情況下它不是必需的。所以呢。請記住,當XHTML告訴我們總是在屬性周圍加上引號時(如果沒有的話,所有人都向你大喊),現在HTML5允許在內部沒有空間的情況下忽略它們。奇異標籤後最後一次斜槓發生了什麼? 「< br/>」?來吧。標準改變。但瀏覽器也支持非標準的東西。 CENTER已棄用;我們在2013年,它仍然有效。垂直居中表?有時候這是唯一的方法。 A中的DIV使其按照您的計劃懸停?前進吧。

專注於重要的事情。