|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
Table布局灵活性不大，你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ulli……但标准语法最好有序的写。
网页制造poluoluo文章简介：相对定位的元素，紧邻着两个浮动元素。Firefox中统统一般，IE6中相对定位元素消散了.
IE自始自终地带来成绩。真的，我以为IE保持本人的一套无所谓，不撑持大概不完整撑持尺度也无所谓。可是，IE6IE7IE8这三个版本都有各自分歧的体现，其实是太让人舒服了。
前两天碰着了这个奇异的成绩：
相对定位的元素，紧邻着两个浮动元素。Firefox中统统一般，IE6中相对定位元素消散了。
办理办法：只需别让相对定位元素紧邻浮动元素就能够了。好比能够在相对定位元素前面加个空元素。固然，这个空元素是毫偶然义的，可是，在IE眼前，又能怎样呢？
经由实行，我发明，只需浮动元素的宽度不填满父元素，相对定位元素就可以一般显现，一旦浮动元素的宽度填满父元素，相对定位元素就会消散。并且，看来，父元素宽度是这类情形产生的临界点。
别的，这个demo内里也存在IE6的另外一个典范bug:由正文发生的体现分歧。(唉，bug都成典范了，IE无敌啊。
请看下面的图中，下面那块，就是有正文的，上面那块是往失落正文的，能够分明的看究竟部的红色空缺高度是分歧的。
看详细演示效果：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><styletype="text/CSS">/*common*/*{margin:0;padding:0;list-style:none;}select,input{font-size:12px;}img{border:0;display:block;margin:0auto;}a{color:#333;text-decoration:none;}a:hover{color:#c42805;text-decoration:underline;}em{font-style:normal;color:#c42805;}ema{color:#c42805;}body{font-size:12px;color:#333;font-family:Arial,"宋体";background-color:#9c9c9c;}.clear{clear:both;}/*wrap*/.wrap{padding:20px0;}p{text-align:center;font-size:14px;font-weight:bold;}/*content*/.content{width:480px;margin:20pxauto;background-color:#fff;padding:10px;overflow:hidden;position:relative;}.absolute{width:280px;background-color:#ddd;padding:10px;text-align:center;position:absolute;right:5px;top:5px;}.main,.sub{float:left;width:240px;height:150px;line-height:150px;text-align:center;}.main{background-color:#ccc;}.sub{background-color:#c2c2c2;}.mainsub{float:left;width:480px;text-align:center;height:150px;line-height:150px;background-color:#ccc;}</style><title>Template</title></head><body><divclass="wrap"><p>修改前</p><divclass="content"><divclass="absolute">相对定位元素</div><divclass="main">浮动元素</div><divclass="sub">浮动元素</div></div><p>修改后</p><divclass="content"><divclass="absolute">相对定位元素</div><!--.absolute--><div></div><divclass="main">浮动元素</div><!--.main--><divclass="sub">浮动元素</div><!--.sub--></div><!--.content--><p>浮动元素宽度小于父元素</p><divclass="content"><divclass="absolute">相对定位元素</div><divclass="main">浮动元素</div></div><p>浮动元素宽度年夜于或即是父元素</p><divclass="content"><divclass="absolute">相对定位元素</div><divclass="mainsub">浮动元素</div></div></div><!--.wrap--></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-15 23:34:39
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
楼主
窥视卡
雷达卡
发表于 2015-2-2 20:10:24