这个说明一下,ie6是一个特例.他跟ie7,8的解析也不完全一样,并且它不支持png透明.
至于如何兼顾各种浏览器写css,请在百度文库,搜索 兼容 css.
另外,屏幕的分辨率也是个问题,你最好设定min-width,和min-height,保证div在最小的分辨率下不变形.
字体也是个问题,vista和win7之类的雅黑,如果在xp下没有雅黑,就会用宋体表示,这个时候也会出问题.
建议买本书看,熟练了,明白一些原理后再去翻网上的技巧学习提高,先不要一来就开始看网上的教程...你懂的,半罐水写的教程多多,很多本身就是错的。<div>
<p>浮动1</p>
<p>浮动2</p>
</div>
div{width: 99px}
p{width: 50pxline-height: 30px}
如果 css 是上面这样的话,两个 p 宽度超过父级了必须换成两行,你加什么都没用;
正确的方法是父 div 的 99px 改为 100px 或以上才能在同一排容纳这两个 p;
clear 是拿来清理浮动的,而不是解决浮动元素总宽度超过父宽度换行问题的,只能说这个作者在放屁。
你尝试把上面 css 中 div 宽度改成100px,并且给 div 加条个红色背景。然后到 Firefox 或 CH、OP、WK 等浏览器下面去看,你的 div 的红色背景在哪儿?你将看不到整个红色背景的 div 区域在高度上完整的包裹住那两个 p。
因为 float 浮动后,实际上也是把 p 从文档流里面拖出来了,父 div 就失去了范围焦点。而 clear 清除浮动作用之一就是拿来解决这个问题:让父 div 正确的包裹浮动子元素,而不是你看那个教程说那样。
IE 下微软的程序员画蛇添足的解决了这个问题,如果你没用 clear 或其他方式清理浮动,ie 会自己帮你搞定这个父级高度上无法包含浮动子元素的问题。但是现在不是 ie 一家独大了,大多数时候你浮动了元素都应该养成习惯清理浮动。
清理浮动方法有几种,请自行百度补脑。