最近发现 火狐浏览器 对CSS代码 解释有问题!高手们进来看看哈!

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了最近发现 火狐浏览器 对CSS代码 解释有问题!高手们进来看看哈!相关的知识,希望对你有一定的参考价值。

先解释下哈:CSS 中position 属性规定元素的定位类型。值relative: 生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 我实际建立这样一个网页:<html><style type="text/css">#Layer13 position:relative; left:200px;</style> <BODY> <div id="Layer13"> <table width="360" height="20" border="0" cellpadding="0" cellspacing="0" align="center"> <tr> <td width="90" align="center"><a href="">物流中心</a></td> <td width="90" align="center"><a href="">物流中心</a></td> <td width="90" align="center"><a href="">物流中心</a></td> <td width="90" align="center"><a href="">物流中心</a></td> </tr> </table> </div> </BODY></HTML> CSS定义了position:relative; left:200px;两项值根据这些属性的定义 表的正常位置是居中 left定义了其向右移动200像素。该代码在普通IE浏览器及遨游等浏览器中显示正常,表右移了200像素,但在火狐浏览器中出现了左右滚动条。实际是 表右移了200像素基础上 又以整个页面为单位 右部多出了200像素的空白区。我是做网页发现的,改来改去无果,最终把这些代码单独提出来探讨下哈。考虑是火狐浏览器本身的问题。哪位高手明白的给小弟解释下子!谢谢!

这其实不算是火狐的问题,火狐和IE属于不同内核的浏览器,对CSS的解析有差异不足为奇,但不能说有差异就一定是火狐有问题,IE则永远正确。事实上,在你说的这个问题上,我认为火狐的解析比IE更规范,因为DIV在未明确指定其width的情况下,其宽度默认是100%的(你给Layer13加个边框就清楚了),所以在设置其Left:200px时,相当于DIV整体右移了200像素,这样DIV的右边200像素肯定就“凸出”到屏幕外面去了,火狐忠实地反映了这种情况(所以出现了横向滚动条),而IE则自作聪明地把DIV右边200像素削掉了。当然,哪种处理方式才合理是见仁见智的,我倾向于支持火狐。要避免这种兼容问题,就要尽可能避免使用百分比作为CSS的长度单位,而应该指定一个绝对数值。像你的代码,只要给Layer13明确指定宽度值(比如width:800px),在IE和火狐就都没问题了。 参考技术A 火狐比IE更遵守w3c规范,但IE市场份额大,火狐用的人很少,我现在都不管火狐。 参考技术B 不是很懂css 参考技术C FF(火狐)没有解释错误。这样解释才是对的。是IE(你应该是在IE6看的吧)兼容了这个错误,在IE7及IE8都会入FF那样解释。这段在火狐、IE7、IE8下应该给这个div的父容器(现在是BODY)加一个剪切超出范围的样式。body
overflow:
hidden;

火狐浏览器中的javascript怎么调试

所需工具材料:火狐浏览器

方法如下:

1、打开火狐浏览器,按F12键调取调试工具。

2、选择“调试器”选项,然后选择需要调试的JS代码,接着在合适的位置加入断点。

参考技术A 在F12开发人员工具中进行调试

打开IE浏览器,按下F12键,就会打开开发人员工具,这是IE内置的开发人员开发工具,方便开发人员对HTML、CSS、Javascript等网页资源进行跟踪调试使用的。

如果你打开的时候没有固定在网页底部,可以点击右上角菜单栏中的按钮来完成。

我们看到在这个工具窗口里面有几个标签页,分别是:HTML、CSS、控制台、脚本、探查器和网络,点开每一个标签,可以执行相应的任务。

在HTML标签窗口中,工具栏中的按钮所执行的操作如下图:

CSS标签是用来查看样式的;控制台显示网页中JS的各种输出信息,包括错误信息、用户日志等;打开脚本标签页,这里面才是我们想要的内容。

我在图中用黄色矩形选中连个控件,左侧的下拉列表用来选择文件,右侧的按钮用来启动调试。当点击启动调试后,调试程序会将窗口最大化,我们在选中的文件中找到需要调试的位置,点击左侧边栏添加断点即可进行调试。

当有程序运行到我们的断点处时,就可以进行调试了。

在这里,我们可以使用快捷键进行操作,常用的快捷键如下:

F9:添加/移除 断点

F10:逐过程,即跳过该语句中的方法、表达式等

F11:逐语句调试,即单步调试,会跳入方法、表达式,进行逐语句的跟踪调试
参考技术B 首先打开需要调试的页面,按F12快捷键打开调试工具如下:
在调试窗口中,所有的HTML元素都会呈现在调试窗口中
如何选择指定的dom节点进行查看和编辑:
js断点调试:firefox非常强大,在firefox调试工具栏中,你可以进行js断点调试以及格式化查看(一些大型的门户网站都会将js压缩成无任何格式的代码这在研究时特别费劲):
我先写一段简单的js代码:
function debug()
for (var i=0;i<10;i++)
alert(i);

js ajax调试,ajax技术如今越来越频繁使用,所以,ajax调试也必不可少:
在chrome调试工具中,可以查看到当前页面所以的请求,包括ajax请求,

以上是关于最近发现 火狐浏览器 对CSS代码 解释有问题!高手们进来看看哈!的主要内容,如果未能解决你的问题,请参考以下文章

火狐浏览器中的javascript怎么调试

DNS服务器失效,火狐可以解释域名,IE和chrome不行

div+css布局背景图片在火狐中不清晰是啥原因

css3中的display:-moz-box是啥意思?是火狐中的啥样式?

火狐浏览器下载|火狐浏览器下载

UVa Online Judge - Home 为啥最近一直登录不了呀,用了360,chrome, 火狐都不行,求指教!!