Question

在FIREFOX 中CSS的效果和div出现的位置有关吗？？

在FIREFOX 中CSS的效果和DIV标签在CSS文件中的出现的位置有关吗？
我在A.CSS 的第一行import B.CSS, 然后在X.HTML中调入A.CSS,但发现在B.CSS中有些DIV在X.HTML中根本没起作用，我把那些在B中没起作用的CSS标签（没有什么特殊效果，是一些共用的CSS效果）直接复制到A.CSS 的开始部分发现正常，但粘贴在中间就不行，这是为什么，（没有重名的DIV)。在IE9.0中正常。

Answer 1

▁▂▃▄▅▆▇书写的顺序是firefox的写在前面，IE7的写在中间，IE6的写在最后▇▆▅▄▃▂▁

解决这四个浏览器的兼容性,也不是一两句能说完的，靠你自己平时的积累了。

解决IE7、IE8样式不兼容问题方法如下：

方法:要在页面中加入如下HTTP meta-tag:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

只要IE8一读到这个标签，它就会自动启动IE7兼容模式，保证页面完整展示。

由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。

这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

区别不同浏览器，CSS hack写法：

区别IE6与FF：

background:orange;*background:blue;

区别IE6与IE7：

background:green !important;background:blue;

区别IE7与FF：

background:orange; *background:green;

区别FF，IE7，IE6：

background:orange;*background:green !important;*background:blue;

注：

IE都能识别*;标准浏览器(如FF)不能识别*；

IE6能识别*，但不能识别 !important,

IE7能识别*，也能识别!important;

FF不能识别*，但能识别!important;

另外再补充一个，下划线"_",

IE6支持下划线，IE7和firefox均不支持下划线。

于是大家还可以这样来区分IE6，IE7，firefox

background:orange;*background:green;_background:blue;

----------------------------------------

HACK对照表

----------------------------------------

IE6 IE7 FF

_ √ × ×

* √ √ ×

!important × √ √

----------------------------------------

注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。

追问

感谢热心回答，我好像没有把问题描述清楚。
在Firefox 18.0 中A.CSS import B.CSS.
B.CSS 的第20行有 .x {float:left;width:200;} 这时不起作用。
如果我把它移植到B.CSS(同一个文件)的第10行 完全正常，或者我把那段CSS代码直接放在A.CSS中也能用。这里可以我可以确认没有div名称冲突。
所以我有产生了个疑问，难道div标签功能和它的位置相关？
以上代码在IE9.0下不做任何处理都正常。

追答

我没遇到过这类情况，会不会是代码执行优化问题，或者前面大的DIV样式没有被20行的样式覆盖呢？

没遇到过，如解决还望分享一下，谢谢了

Answer 2

继承了吧
试试吧import里面被覆盖的内容提前到A.css里靠上的位置

追问

能否详细点，好像有这么回事。

Answer 3

import 在 FF 中是有效的。

你写的 @import url（css/b.css）写法对不对？引用的相对路径对不对?
另外有人说只支持相对路径，绝对路径FF是不认的，这个说法我没测过，你自己试下。

检查 a.css 、b.css 和 html 文件编码是否一致

总体来说一般不用 import 这个方法调用 css 文件，多个css考虑合并，如果网站大，样式表要分类则应该用 link 方式分别引用多个样式。避免用 import 引用其他 css 的原因你自己百度下。

Answer 4

那个是css hack 百度一下。是兼容性的 有一定的位置顺序

追问

有谁知道位置顺序相关的规则，有例子更好，谢谢