经常我们用DIV+CSS建站的时候,发现在IE6,IE7,Firefox里面显示经常一塌糊涂,而在外贸网站建设中,因为浏览着对象是国外,Firefox的市场份额很大,为了让我们的客户能看到一个完美专业的显示效果,所以Firefox必须考虑!
以下是一些常见问题和解决方法
1、居中问题
div里的内容,ie默认为居中,而ff默认为左对齐。
使ff内容居中的方法是增加代码margin:auto;
2、高度问题
设有两横行div排列,上面的div设置高度(height),如果div里的实际内容大于所设高度,在ff中会出现两个div重叠的现象;但在ie中, 下面的div会自动给上面的div让出空间。所以为避免出现层的重叠,高度一定要控制恰当,或者干脆不写高度,让他自动调节。
或者设置:overflow:hidden
3、clear:both;
拿footer为例,有时候如果上面使用 了float控制的n列的布局,那么在用ff浏览时footer很有可能不老实,到处乱动??因为他还在受到浮动(float)的控制。如果想让它老老实 实呆在页面下方,在footer的div中写入clear:both;就可以达到效果了!
4、浮动ie产生的双倍距离
#box{
float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}
5、重点讲解:display:block,inline两个元素 display(显示)
display:block; //可以为内嵌元素模拟为块元素
display:inline; //实现同一行排列的的效果
diplay:table; //for ff,模拟table的效果
Display:block元素的特点是:
总是在新行上开始;
高度,行高以及顶和底边距都可控制;
宽度缺省是它的容器的100%,除非设定一个宽度
,
,
, , 和 是块元素的例子。
display:inline就是将元素显示为行内元素.
inline元素的特点是:
和其他元素都在一行上;
高,行高及顶和底边距不可改变;
宽度就是它的文字或图片的宽度,不可改变。
, , , , , 和 是inline元素的例子。
例子:
无标题文档
#inline{width:400px; height:40px;background:#99CCCC;padding:15px 0px 0px 15px}
#inline ul{ margin:0px; list-style:none;}
#inline ul li{display:inline; font-size:12px;margin-left:5px}
#block{width:400px; height:40px;background:#FFCC99;padding:15px 0px 0px 15px}
#block ul{ margin:0px; list-style:none;}
#block ul li{display:block; font-size:12px;height:20px}
#div_inline{ width:800px;display:inline;height:120px;}
天天招生网
心血管网
高血压网
先心病网
查看更多关于浏览器兼容:Web标准化建站(DIV+CSS)必看的常见问题解决方法_html/css_WEB-IT的详细内容...