|
该帖已经被评为良好帖
|
|
|---|---|
| 作者 | 正文 |
|
时间：2008-07-07
你说的这个是html语言规范定义的合法嵌套关系，以及这种关系下对应的默认样式
比如： <span><div></div></span> 很明显从语义上就是错误的，内联区域当然不能反过来包含basal分区 这一点当然大家都没有什么疑议。 但是——这种表现语义上合法嵌套关系对应的默认样式，是否也对CSS样式渲染做了规约呢？ 通览CSS1-3，找不到这样的显式约定或关联的隐式约定， 再者，如果规范里有这方面的规约（或者是浏览器开发人员公认的），相信大多数遵循标准的现代浏览器都会对定义inline样式的元素所包含的子元素所做的block样式定义拒绝渲染的。 引用 <a href="javascript:;" style="background:#ff0;">aa<span style="display:block;margin:20px auto; height:100px; background:#f00;">bb</span>cc</a>dd aa被分割为一个匿名block（但<a></a>依然表现内联样式特性），span定义为block后margin-top和margin-bottom也可以被正常渲染。 |
| 返回顶楼 | |
|
时间：2008-07-07
讨论这个有点偏题了，抱歉，呵呵
另外，下面这个是我之前写的，也内存泄漏问题，希望得到指点修正一下： 引用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>zCool</title> <style type="text/css" > #g li{ list-style:none; float:left; margin:20px; border:1px solid #ccc; width:50px; height:37px; background:url(http://www.google.cn/intl/zh-CN/images/toolbar_animation_20080512.png) no-repeat; cursor:pointer; } img{ border:1px dashed #ccc; } </style> </head> <body> <ul id="g"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <img src="http://www.google.cn/intl/zh-CN/images/toolbar_animation_20080512.png" /> <script type="text/javascript"> var _setInterval=window.setInterval; window.setInterval=function(fn, delay){ if(typeof fn=="function"){ var args=Array.prototype.slice.call(arguments, 2); var f=function(){fn.apply(null, args)}; return _setInterval(f, delay); } return _setInterval(fn, delay); } var li=document.getElementById("g").getElementsByTagName("li"), intervalId, j=0; for(var i=0, l=li.length; i<l; i++){ var lii=li[i], bp="0px "+(i*-37)+"px"; lii.style.backgroundPosition=bp; lii.onmouseover=function(){ intervalId=setInterval(flash, 50, this.style); }; lii.onmouseout=(function(bp){ return function(){ intervalId=clearInterval(intervalId); j=0; this.style.backgroundPosition=bp; } })(bp); } function flash(ts){ if(j<5){ if(j<4){ ts.backgroundPosition=ts.backgroundPosition.replace(/^(-?\d+)(?=px\s-?\d+px)/, function(){return parseInt(arguments[1])-52;}); }else{ ts.backgroundPosition=ts.backgroundPosition.replace(/(-?\d+)(?=px$)/, function(){return parseInt(arguments[1])+4;}); } j++; intervalId=clearInterval(intervalId); intervalId=setInterval(flash, 50, ts); }else{ intervalId=clearInterval(intervalId); j=0; } }; </script> </body> </html> |
| 返回顶楼 | |
|
时间：2008-07-08
修改了下：
引用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>zCool</title> <style type="text/css" > #g{ display:inline;} #g li{ list-style:none; float:left; margin:10px; width:50px; height:37px; background:url(http://www.google.cn/intl/zh-CN/images/toolbar_animation_20080512.png) no-repeat; cursor:pointer; } #g a{ position:absolute; padding:48px 0 0; width:50px; font:12px/22px "宋体"; text-align:center; white-space:nowrap; text-decoration:none; } #g a:hover{ color:#f00; text-decoration:underline; } em.new{ color:#f00; font:10px "宋体"; vertical-align:top; } img{ border:1px dashed #ccc;} </style> </head> <body> <ul id="g"> <li><a href="javascript:;" title="搜索热门网络视频">视频</a></li> <li><a href="javascript:;" title="搜索全球的图片">图片</a></li> <li><a href="javascript:;" title="搜索您身边的分类生活信息">生活<em class="new">新!</em></a></li> <li><a href="javascript:;" title="查询地址、搜索周边和规划线路">地图</a></li> <li><a href="javascript:;" title="商业信息、财经新闻、实时股价和动态图表">财经</a></li> <li><a href="javascript:;" title="查看分类热门搜索排行">热榜</a></li> <li><a href="javascript:;" title="网址大全、快速直达分常用网站">网站导航</a></li> </ul> <img src="http://www.google.cn/intl/zh-CN/images/toolbar_animation_20080512.png" /> <script type="text/javascript"> // IE缓存图像 try{ document.execCommand("BackgroundImageCache", false, true); } catch(e){ } var li=document.getElementById("g").getElementsByTagName("li"), intervalId, j=0; for(var i=0, l=li.length; i<l; i++){ var lii=li[i], bp="0px "+(i*-37)+"px"; lii.style.backgroundPosition=bp; lii.onmouseover=function(){ intervalId=setInterval((function(o){return function(){flash.call(o)}})(this), 50); }; lii.onmouseout=(function(bp){ return function(){ intervalId=clearInterval(intervalId); j=0; this.style.backgroundPosition=bp; } })(bp); } function flash(){ var ts=this.style; if(j<5){ if(j<4){ ts.backgroundPosition=ts.backgroundPosition.replace(/^(-?\d+)(?=px\s-?\d+px)/, function(){return parseInt(arguments[1])-52;}); }else{ ts.backgroundPosition=ts.backgroundPosition.replace(/(-?\d+)(?=px$)/, function(){return parseInt(arguments[1])+4;}); } j++; }else{ intervalId=clearInterval(intervalId); j=0; } }; </script> </body> </html> |
| 返回顶楼 | |
