子元素高度30.如果加上border-bottom.就是31了.已经超出了父元素的高度了.
这个你该清楚的.
然后就是不同浏览器解析的问题(兼容性):
对于子元素超出父元素(父元素定义了宽高,而未定义overflow),ie6是这样处理的:父元素会被子元素撑开ie7是这样处理的:超出的部分继续显示.父元素保持原设大小(相当于overflow:visible)ff:隐藏超出部分(相当于overflow:hidden)
(上述情况不知是否完全正确,请楼主自行测试)
所以会出现你看到的效果.
我不知道你需要实现什么效果.但是,从高度计算上,我觉得你的算法可能是有问题的.
还有.我不明白你为什么要将两个div都设置同高.同宽.
一般父级元素设置了宽度.子元素(块级)会"填充"整个宽度的.
而子级元素(非浮动)高度变化将自动撑开父级元素(未定义高度).
还有其他的一些情况:浮动,定宽高,overflow等.这些就不说了
首先，不知道你的预期效果是什么样的，针对你给出的样式：div li{list-style:nonedisplay:inlinemargin:7px}
a{text-decoration: none}
说明一下：
第一条，规定了 所有 div 下的 li的样式，即 不显示图标，显示为内联样式不换行，外边距7px。
第二条，规定了 所有超级链接内的文本样式，这里为无样式。
针对你说的“没有达到预期效果，display:inline只对第一个子元素li有效果，list-style:none则对下面所有li起了作用，text-decoration:none也只有在css里标出a标签后起了效果，个人认为和继承有关”
css样式的规则是这样的，你规定到了什么级别就对什么级别的HTML标签起作用。比如 你写的 div li{}表示规定 HTML中所有div下面的li的样式。a{}表示规定 HTML中所有超级链接的样式。
<ul>表示无序列表<ol>表示有序列表，按照规定li 就应该是在ul ol 的，浏览器对HTML标签是有纠错机制的，即便你再HTML中写错部分标签，HTML也会容错正常显示。
