The width of an inline element is changing without making it as a block?
In the code below:
<html>
<head>
<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Here, even if i donot display anchor a开发者_运维百科s a block then still on changing it's width, it is changing in actual. However, i have read that:
The W3C’s CSS2 spec states that for Inline, non-replaced elements, “the ‘width’ property does not apply”.
Can anybody please explain this to me, why is it so?Thnks...
I tried this in Firefox, IE, Chrome and Opera, and none of them applies the width if you don't make the anchor elements into block elements.
I did however try using jsfiddle, where the pages have a doctype. Your page doesn't have a doctype, so it's rendered in quirks mode, which may trigger unusual behaviour in some browsers.
加载中,请稍侯......
精彩评论