怎样解决浏览器兼容问题 10
我用dreamweaver做的网站,主要用IE预览,在IE浏览器中显示很正常,但在搜狗浏览器中网页有的地方乱了,应该是浏览器兼容问题,大神能不能耐心的给我解释一下,并给我...
我用dreamweaver做的网站,主要用IE预览,在IE浏览器中显示很正常,但在搜狗浏览器中网页有的地方乱了,应该是浏览器兼容问题,大神能不能耐心的给我解释一下,并给我出出主意,,谢谢了!
展开
1个回答
展开全部
兼容性问题的确很让人纠结,但是,时间长了遇到的问题多了,慢慢的积累的解决问题的方法就会了,就不觉得难了。
DIV+CSS设计时IE6、IE7、FF 与兼容性有关的特性
png 浏览器图片透明方法:
类 {
width: 100%; height: 100%; background: url(PNG地址) no-repeat left top; {你的其他代码} _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="PNG地址"); _background: none; }
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果!
所有浏览器 通用
height: 100px;
IE6 专用
_height: 100px;
IE6 专用
*height: 100px;
IE7 专用
*+height: 100px;
IE7、FF 共用
height: 100px !important;
一、CSS 兼容
以下两种方法几乎能解决现今所有兼容.
10 .IE6下为什么图片下有空隙产生
解决这个BUG的技巧也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为vertical-align:top bottom middle text-bottom 都可以解决.
1, !important (不是很推荐,用下面的一种感觉最安全)
随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)
代码:
<style>
#wrapper {
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */ }
</style>
2, IE6/IE77对FireFox <from 针对firefox ie6 ie7的css样式>
*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.
代码:
<style>
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
</style>
以上只是一小部分,你可以参见:http://wenku.baidu.com/view/fa3dccfa910ef12d2af9e7c1.html
DIV+CSS设计时IE6、IE7、FF 与兼容性有关的特性
png 浏览器图片透明方法:
类 {
width: 100%; height: 100%; background: url(PNG地址) no-repeat left top; {你的其他代码} _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="PNG地址"); _background: none; }
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果!
所有浏览器 通用
height: 100px;
IE6 专用
_height: 100px;
IE6 专用
*height: 100px;
IE7 专用
*+height: 100px;
IE7、FF 共用
height: 100px !important;
一、CSS 兼容
以下两种方法几乎能解决现今所有兼容.
10 .IE6下为什么图片下有空隙产生
解决这个BUG的技巧也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为vertical-align:top bottom middle text-bottom 都可以解决.
1, !important (不是很推荐,用下面的一种感觉最安全)
随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)
代码:
<style>
#wrapper {
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */ }
</style>
2, IE6/IE77对FireFox <from 针对firefox ie6 ie7的css样式>
*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.
代码:
<style>
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
</style>
以上只是一小部分,你可以参见:http://wenku.baidu.com/view/fa3dccfa910ef12d2af9e7c1.html
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询