legend標籤的一些糊塗賬

我也沒有想到,某一天,我竟然和legend標籤糾結起來了。css

我在codepen上寫了一個原始demo:chrome

http://codepen.io/myqianlan/pen/RPaxGJ瀏覽器

能夠看到,legend右對齊了,可是margin-right卻木有生效!測試

why? why? why?code

真是百思不得其解,因而進行了問題搜索,QQ羣求助,結果是彷佛沒人理我,或者理個人方式也不對,我想靜靜。element

靜靜也不能解決個人疑問呀。。只能繼續搜尋,找緣由。get

茫茫之中,一段文字引發了個人注意it

http://www.w3schools.com/tags/tag_legend.asp 最下面io

Default CSS Settings
Most browsers will display the <legend> element with the following default values:

Example

legend {
    display: block;
    padding-left: 2px;
    padding-right: 2px;
    border: none;
}

好的,大部分瀏覽器legend的默認樣式爲block!!!class

block爲啥能實現右對齊? block爲啥佔位跟inline-block同樣?我能將其重設爲inline嗎?一連串的問題,趕着讓我去本身測試。

測來又測去,發現了一個狀況:

legend標籤瀏覽器默認爲塊元素,而且CSS是不能修改其爲行內元素的(不一樣瀏覽器實現有差,但第一個legend均無論怎麼改,都是block),但其佔位卻跟inline-block同樣。chrome下其可以響應text-align,我認爲這是一個bug,是不標準的。

呵了個呵,這legend標籤究竟是個什麼鬼!

最後,若是要實現最初demo的效果,使用float吧。

關於這個問題,我爲啥會糾結這麼久,我只想說:我不是認真,我就是想知道爲何!

相關文章
相關標籤/搜索