扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
1.为什么在不同的浏览器显示效果不一样?
成都创新互联10多年成都定制网站服务;为您提供网站建设,网站制作,网页设计及高端网站定制服务,成都定制网站及推广,对成都石雕等多个方面拥有丰富的网站推广经验的网站建设公司。
因为不同浏览器对于css样式表的解析不一样,所以导致样式乃至层布局发生变化。例如,ff中设置padding属性时,div会相应增加height和width,而ie的解析是不会的,再例如ff对盒模型的解析和ie相差两个象素。
2.设计时要做到所有浏览器都兼容吗?
我的答案是即使能做到也没有必要去做,科技是在进步的,用户总是在推陈出新的使用这新版本的浏览器,根据“设计诉说”的站点统计小样本结果显示,6225个访问者中有72.1%使用IE6.0;12.7%使用IE7.0;7.9%在使用FF2.0,剩余的不同版本的浏览器占的百分比都不到1% 所以我认为只要做到IE6 FF2.0 以及新出的IE7.0兼容即可,顶多向下兼容一下IE5.5,完全没有必要为了那些个小数点费劲脑子。如果有必要可以另外设计css文件,然后通过js判断浏览器版本进行选择相应的文件。
3.css样式的优先级是怎么样的?
这个是个好问题,当你弄明白这个,我想应该可以很自如的运用一些兼容样式表的技巧了。在正常的IE中,如果你在css中重复定义一个属性时,浏览器解析的是后面的属性,举个例子
box {
height:100px;
height:200px;
height:400px;
height:300px;
}
重复定义盒模型的高度属性,越后面优先级越高,所以浏览器解析出的结果就是高度为300px。
4.如何做到让IE6.0与FF兼容?
最常用的一种方法了,也是屡试不爽的——“!important”,这个字段是用来提高优先级的,而IE6.0对于找个字段是无法识别的,于是FF与IE6.0就可以分开解析了。例如,在IE下显示red,FF下显示blue,只需要这么写
color {
background-color:blue !important;
background-color:red;
}
“!important”FF可以识别,blue那行提高优先级,因此在FF中blue优先级高于red,显示为蓝色
IE6.0将上面的样式识别成
color {
background-color:blue;
background-color:red;
}
red优先级高,所以显示为红色。
切记,上下两句的位置一定不能颠倒。问为什么的再好好看看上两个问题,再不明白就面壁去....
5.如何做到让更低版本IE兼容?
其实我认为做到IE6.0与FF2.0已经足够,5.5的兼容用“ /**/” 5.0的兼容用“”,具体我就不说了,说实在我也不大懂,大家可以去google一下
6.如何做到IE7.0兼容?
这个问题我也要问大家,大家有答案的告诉我,因为新版的IE7.0对于“!important”具有识别能力,可是对于盒以及padding等的解析却和 IE6.0差不多,于是乎,完全兼容了IE6.0和FF2.0的就似乎兼容不了IE7.0,捣腾了好久,还是不知道怎么办。请大家帮帮忙!
7.css对浏览器兼容应做到完全一致吗?
个人认为在满足可读性的原则和不影响整体布局的前提下,界面有些许的位置不同是可以允许的,要在不同浏览器下做到一模一样,那真是太费劲了。
恩,先这些吧,欢迎大家指正和补充~
查看css样式:
1、IE类浏览器 右键查看源文件
2、Firefox
工具-附加组件-获取组件-查找firebug-安装
安装完成后会在右下角出现一个 甲壳虫 类的图标,点击就可以查看源文件及其css样式
3、点击文件-保存-保存类型为网页全部
或者右键迅雷下载全部链接
这样可以在本地查看
直接F12,然后选中要查看的div,会显示出css样式,所有浏览器通用
尊敬的用户,您好!很高兴为您答疑。
css样式可以在页面上右击元素查看,然后即可在下面的面板上出现对当前对象生效的css样式代码,此时您可以直接修改css来实现样式预览。即实现了您所说的css调试。
希望我的回答对您有所帮助,如有疑问,欢迎继续咨询我们。
IE9浏览器默认情况下隐藏了浏览器菜单栏,因此在打开IE9浏览器以后,需要按键盘上的ALT键来显示浏览器工具栏。
2
在显示出来的IE菜单栏上点击菜单“查看”→“源文件”。
3
IE浏览器会自动打开一个新的窗口来显示网页源代码。
4
哦~这份缘文件实在太难看懂了~别着急,其实IE9提供了一个更为强大的网页源代码查看工具——开发者工具。
点击IE9浏览器右上角的齿轮图标,在下拉菜单中点击“F12开发者工具”,或者直接按键盘上的快捷键F12也可以打开开发者工具。
5
IE9的开发者工具提供更为强大的网页开发查看代码和调试功能,你可以使用开发者工具更方便地查看网页HTML代码,CSS样式代码和脚本等信息。
END
使用Firefox火狐浏览器查看网页源代码
1
Windows Vista/7用户:点击Firefox浏览器左上角的快捷菜单,在下拉菜单中点击“Web开发者”→“查看页面源代码”。
Windows XP/Linux用户:点击Firefox浏览器的菜单“工具”→“Web开发者”→“查看页面源代码”。
键盘快捷键:Ctrl+U
2
Firfox浏览器会打开网页源代码窗口显示网页HTML源代码。
3
如果想要查看其中外联的CSS源文件,可以用鼠标点击源代码中的CSS外联文件链接网址。
4
不过自带的之中网页源文件查看器并不好用,你可以尝试使用插件Firebug来获取更好用的网页开发功能。
点击“Web开发者”→“获取更多工具”。
5
在弹出的Firefox新标签页中安装插件“Firebug”。
6
安装完成以后会在Firefox浏览器的右上角工具栏中添加Firebug的图标,点击它就可以使用Firebug网页调试工具了。
这个工具相当强大哦~
END
使用谷歌Chrome浏览器查看网页源代码
点击Chrome浏览器右上角的快捷菜单“工具”→“查看源代码”。
Chrome浏览器会打开一个网页源代码显示窗口,这个源代码显示窗口好像也是不那么友好,一大堆网页代码实在不知道如何下手呀。
如果你想要更好的网页源代码显示和开发工具,那就点击Chrome浏览器右上角的快捷菜单“工具”→“开发者工具”。
看看,不需要下载任何插件,Chrome浏览器就已经为你提供了一个相当强大的网页开发者工具了。
使用Chrome浏览器开发者工具来查看和调试CSS也相当好用。
一、不同的浏览器有不同的要求,有些浏览器的css的效果用dw的时候就不会显示,所以你查看样式效果的时候不要用dw。
二、最新版的QQ浏览器集成了许多其他浏览器的优点,在代码执行和浏览器优化上有了质的飞跃,一般的代码都是可以正常显示的,你也不用担心要换代码才能起效,用它可以让你省心省力,你可以下载体验下。
三、请确认使用的字体是浏览器识别的通用字体,然后确定你的浏览器不是ie6到8,在dw内写代码的时候不要以设计视图作为参考,设计视图是不准确的,然后你需要看看你的字体是否被该浏览器所支持,尽量使用大众字体。你可以先把文字换成宋体或者黑体,看看是否显示。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流