nesting div within span problem
div is a block element and span is an inline element so according to xhtml 1.0 validation it is not right but still 开发者_如何学Goseveral websites uses this method for styling is it all right ? or it will cause some problem please help me ?
It is not right + You never need to do this => thus never should.
Websites that do that wont be 'strict xhtml compliant' but in reality HTML like this will work just fine in any modern browser. That doesn't mean you should do it though - because theres no need to.
As of today 11th March 2014, modern browsers WILL give you problem as they render block element differently from inline element.
I encountered this incident myself, read my experience and solution: http://diophung.blogspot.sg/2014/03/web-developer-conform-to-w3c-standards.html
It's wrong, and embarrassing for not knowing such standard (your web designers will laugh at you) !
Nesting div within span may cause serious problem in firefox when you need to get the offsetTop(offsetLeft) of the span.
However this performs normal in chrome(v57.0.2987.98).
so I agree with the answer of Konerak:
"the browser will try to interpet it in their own (unspecified/unpredictable) way. It might work out fine, it might break. It might work now, break later. "
It all depends on the browser itself.
The specification about the offsetTop/offsetLeft is here:
https://drafts.csswg.org/cssom-view/#dom-htmlelement-offsettop
The following is my testing code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="margin:100px">
<span id="span-divWrapper">
<div id="div-nestedInSpan" style="border:1px solid black;">I am the div nested in span</div>
</span>
</div>
<button onclick="showDivOffsetTop()">show div offsetTop</button>
<button onclick="showSpanOffsetTop()">show span offsetTop</button>
<script type="text/javascript">
var div = document.getElementById("div-nestedInSpan");
var span = document.getElementById("span-divWrapper");
var showDivOffsetTop = function(){
alert(div.offsetTop);
}
var showSpanOffsetTop = function(){
alert(span.offsetTop);
}
</script>
</body>
</html>
加载中,请稍侯......
精彩评论