ul里不能直接嵌套div(在ie7以前版本)

平时为了写某个js效果,从而忽略了标签的嵌套 从而导致了IE6-7混乱,在ul下,直接嵌套div,在ie7以前版本,会出现的状况是:div会被离它最近的li包裹住。 
请看dome

<ul class="clearfix" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<div class="add">
<!--这一块在ie7及之前版本会被加载到文本为5的li里。-->
</div>
</ul> 

CSS

<style type="text/css">
.clearfix{ display:inline-block; width:100%; }
.clearfix li{ float:left; padding:5px; border:1px solid #999; width:12%; list-style:none; }
.add{ background:#67BCD1; height:20px;}
</style> 

在谷歌下 
 
在ie7文档模式下,就把div添进了离它最近的li里面。 
 
so, ul不支持直接嵌套div的写法。

时间: 2024-12-30 13:39:05

ul里不能直接嵌套div(在ie7以前版本)的相关文章

HTML里为什么不能在&lt;p&gt;标签中嵌套&lt;div&gt;标签

学习过HTML语言的人都应该知道,在HTML里,有分块级元素和内联元素:例如我们常用到的div,o,ul,dl,table,h1...h6等,这些都是块级元素:而像a,b,i,em,img,span等就是内联元素了.在开发过程中,我们避免不了各种元素的嵌套,但是有时候我们在不知不觉中就错误地嵌套元素了.为什么说是不知不觉呢.因为就算我们错误地嵌套了,但是在浏览器中显示的时候,其实是没有区别的.咱们今天就具体地分析为什么不能再<p>里嵌套<div>.希望通过这个例子,大家可以自己去学

div嵌套div 背景图片 不显示的问题

这几天 在做一个小Demo的时候碰到了如上的问题,一个DIV嵌套多个DIV时,父容器DIV不显示背景图片.同时结合之前碰到类似的问题,我归纳了如下几个解决方法: 1.就是常见的 子div 背景把父div的背景给盖住了,例子: 该例子就是 我有一个父div 和它里面嵌套的一个子div,两个div的宽度和高度大小是一样的,其中父div的背景图片就是上面这张图片(箭头部分是透明的),子div的背景图片是那种渐变灰色图片,其实懂英语的人应该看出来了就是,我想实现一个那种类似于iphone滑动那种灯光从

p标签里面不能嵌套div

先申明本人代码水平为零起点,刚开始学习前端,所以就是小白.不过大神也是小白变身的么,所以要专心码代码,潜心钻研,haha~ 今天练习了段代码,发现效果和自己想象的不一样: 想了一下估计是<p>和<div>嵌套的问题,但是两个不都是块级元素,难道不能嵌套么,而且最后的结果居然是多出来一段<p>的效果,感觉HTML包容心好强,代码码错了也能显示出来.所以就在网上找了点资料,涉及到块级元素和内联元素的嵌套问题. 1.块级元素(block)与内联元素(inline)的区别: 简

p标签内不能嵌套div(注解)

相关知识: 内联元素可以嵌套内联元素,块级元素可以嵌套部分块级元素并也能嵌套内联元素,但内联元素不能嵌套块级元素.块级元素为block,内联元素为inline,拥有"inline"特性的同时又拥有"block"的特性称为replace元素. <p> <div>编码美学</div> <div>编码美学</div> </p> 在上面的代码中,p标签在遇到下一个块级元素的时候就闭合了,它会被浏览器解析

button标签内部嵌套div时的样式有bug(暂定的解决方案)

button标签内部嵌套div时的样式有bug 暂定解决方案,将button标签改为div标签 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">button{padding: 0;}.logo_img{f

嵌套div中margin-top转移问题的解决办法

在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-bottom的值会“转移”给外层div. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=&q

html中标签的嵌套规则(注意:p中不可以嵌套div)

今天看到一道阿里的前端笔试题: 当时看到第一个选项的时候果断滴选择是错误的,但是晚上自己做练习的时候,就顺带试了一下,用一个p标签嵌套了个div,但是,天啊,浏览器竟然解析为: <p>                                                                  <p></p> <div></div>                                              &l

DIV的Position属性和DIV嵌套DIV

1.前言 我们在利用div+css进行布局时,常常被div的位置弄的焦头烂额,很多人甚至放弃了div而直接用table.这里一如既往的推荐使用div布局,其实我们只要掌握了div的position属性和div的float属性,布局是非常灵活的,这里详细说一下div的position,没想象中那么简单,也没想象中那么复杂. 2.position的四种取值 static:static定位就是不定位,出现在哪里就显示在哪里,这是默认取值,只有在你想覆盖以前的定义时才需要显示指定 relative:re

div中嵌套div水平垂直居中

div中嵌套一个居中的div有很多方法,如果不想调整边距,有一个简单的方法: 1 <div align="center" style="width: 200px;height: 200px;background: green;display: table-cell;vertical-align: middle;"> 2 <div style=" width: 100px;height: 100px;background: blue;&qu