CSS浏览器兼容问题IE6.0I

nbsp;   width:200px;

    height:200px;

    border:1pxsolidred;

    }

    -->

    </style>

    ff与ie

    1。div居中问题

    div设置margin-left，margin-right为auto时已经居中，ie不行，ie需要设定body居中，首先在父级元素定义text-algin:center;这个的意思就是在父级元素内

    的内容居中。

    2。链接(a标签)的边框与背景

    a链接加边框和背景色，需设置display:block，同时设置float:left保证不换行。参照menubar，给a和menubar设置高度是为了避免底边显示错位，若不设height，可以在menubar中插入一个空格。

    3。超链接访问过后hover样式就不出现的问题

    被点击访问过的超链接样式不在具有hover和active了，很多人应该都遇到过这个问题，解决方法是改变css属性的排列顺序:l-v-h-a

    code:

    <styletype='text/css'>

    <！--

    a:link{}

    a:visited{}

    a:hover{}

    a:active{}

    -->

    </style>

    4。游标手指cursor

    cursor:pointer可以同时在ieff中显示游标手指状，hand仅ie可以

    5。ul的padding与margin

    ul标签在ff中默认是有padding值的，而在ie中只有margin默认有值，所以先定义ul

    {margin:0;padding:0;}就能解决大部分问题

    6。form标签

    这个标签在ie中，将会自动margin一些边距，而在ff中margin则是0，因此，如果想显示一致，所以最好在css中指定margin和padding，针对上面两个问题，我的css中一般首先都使用这样的样式ul，form{margin:0;padding:0;}给定义死了，所以后面就不会为这个头疼了。

    7。box模型解释不一致问题

    在ff和ie中的box模型解释不一致导致相差2px解决方法：div{margin:30px！important;margin:28px;}注意这两个margin的顺序一定不能写反，important这个属性ie不能识别，但别的浏览器可以识别。所以在ie下其实解释成这样：div

    {maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写

    margin:xxpx！important;

    #box{width:600px;//forie6。0-w\idth:500px;//forff+ie6。0}

    #box{width:600px！important//forffwidth:600px;//forff+ie6。0width

    :500px;//forie6。0-}

    8。属性选择器(这个不能算是兼容，是隐藏css的一个bug)

    p[id]{}div[id]{}

    这个对于ie6。0和ie6。0以下的版本都隐藏，ff和opera作用。属性选择器和子选择器还是有区别的，子选择器的范围从形式来说缩小了，属性选择器的范围比较大，如p[id]中，所有p标签中有id的都是同样式的。

    9。最狠的手段-！important;

    如果实在没有办法解决一些细节问题，可以用这个方法。ff对于”！important”会自动优先解析，然而ie则会忽略。如下

    。tabd1{

    backg肉nd:url(/res/images/up/tab1。gif)no-repeat0px0px！important;

    

    backg肉nd:url(/res/images/up/tab1。gif)no-repeat1px0px;}

    值得注意的是，一定要将xxxx！important这句放置在另一句之上，上面已经提过

    10。ie，ff的默认值问题

    或许你一直在抱怨为什么要专门为ie和ff写不同的css，为什么ie这样让人头疼，然后一边写css，一边咒骂那个可恶的m$ie。其实对于css的标准支持方面，ie并没有我们想象的那么可恶，关键在于ie和ff的默认值不一样而已，掌握了这个技巧，你会发现写出兼容ff和ie的css并不是那么困难，或许对于简单的css，你完全可以不用”！important”这个东西了。

    我们都知道，浏览器在显示网页的时候，都会根据网页的css样式表来决定如何显示，但是我们在样式表中未必会将所有的元素都进行了具体的描述，当然也没有必要那么做，所以对于那些没有描述的属性，浏览器将采用内置默认的方式来进行显示，譬如文字，如果你没有在css中指定颜色，那么浏览器将采用黑色或者系统颜色来显示，div或者其他元素的背景，如果在css中没有被指定，浏览器则将其设置为白色或者透明，等等其他未定义的样式均如此。所以有很多东西出现ff和ie显示不一样的根本原因在于它们的默认显示不一样，而这个默认样式该如何显示我知道在w3中有没有对应的标准来进行规定，因此对于这点也就别去怪罪ie了。

    11。为什么ff下文本无法撑开容器的高度

    标准浏览器中固定高度值的容器是不会象ie6里那样被撑开的，那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px;这里为了照顾不认识min-height的ie6可以这样定义:

    {

    height:auto！important;

    height:200px;

    min-height:200px;

    }

    12。firefox下如何使连续长字段自动换行

    众所周知ie中直接使用word-wrap:break-word就可以了，ff中我们使用js插入

     的方法来解决

    <styletype='text/css'>

    <！--

    div{

    width:300px;

    word-wrap:break-word;

    border:1pxsolidred;

    }

    -->

    </style>

    <div

    id='ff'>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

    aaaaaaaaaaaaa

    <scripttype='text/javascript'>

    

    functiontobreakword(el，intlen){

    varobj=document。getelementbyid(el);

    varstrcontent=obj。innerhtml;

    varstrtemp='';

    while(strcontent。length>intlen){

    strtemp+=strcontent。substr(0，intlen)+' ';

    strcontent=strcontent。substr(intlen，strcontent。length);

    }

    strtemp+=' '+strcontent;

    obj。innerhtml=strtemp;

    }

    if(document。getelementbyid&&！document。all)tobreakword('ff'，37);

    

    </script>

    13。为什么ie6下容器的宽度和ff解释不同呢

    <？xmlversion='1。0'encoding='gb2312'？>

    <！doctypehtmlpublic'-//w3c//dtdxhtml1。0strict//en'

    'w3*/tr/xhtml1/dtd/xhtml1-strict。dtd'>

    <metahttp-equiv='content-type'content='text/html;charset=gb2312'/>

    <styletype='text/css'>

    <！--

    div{

    cursor:pointer;

    width:200px;

    height:200px;

    border:10pxsolidred

    }

    -->

    </style>

    <divonclick='alert(this。offsetwidth)'>让firefox与ie兼容

    问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内，这里ie6解释为200px，而ff则解释为220px，那究竟是怎么导致的问题呢？大家把容器顶部的xml去掉就会发现原来问题出在这，顶部的申明触发了ie的qurksmode，关于qurksmode、standardsmode的相关知识，请参考:microsoft/china/msdn/library/webservices/asp/aspnetusstan。mspx？mfr=true

    ie6，ie7，ff

    ie7。0出来了，对css的支持又有新问题。浏览器多了，网页兼容性更差了，疲于奔命的还是我们，为解决ie7。0的兼容问题，找来了下面这篇文章：现在我大部分都是用！important来hack，对于ie6和firefox测试可以正常显示，但是ie7对！important可以正确解释，会导致页面没按要求显示！下面是三个浏览器的兼容性收集。

    第一种，是csshack的方法

    height:20px;

    *height:25px;

    height:20px;

    注意顺序。

    这样也属于csshack，不过没有上面这样简洁。

    #example{color:#333;}

    *html#example{color:#666;}

    *+html#example{color:#999;}

    第二种，是使用ie专用的条件注释

    <！--其他浏览器-->

    <linkrel='stylesheet'type='text/css''css。css'/>

    <！--[ifie7]>

    <！--适合于ie7-->

    <linkrel='stylesheet'type='text/css''ie7。css'/>

    <！[endif]-->

    <！--[iflteie6]>

    <！--适合于ie6及一下-->

    <linkrel='stylesheet'type='text/css''ie。css'/>

    <！[endif]-->

    第三种，cssfilter的办法，以下为经典从国外网站翻译过来的。。

    新建一个css样式如下：

    #item{

    width:200px;

    height:200px;

    backg肉nd:red;

    }

    新建一个div，并使用前面定义的css的样式：

    <divid='item'>sometexthere

    在body表现这里加入lang属性，中文为zh：

    <bodylang='en'>

    现在对div元素再定义一个样式：

    *:lang(en)#item{

    backg肉nd:green！important;

    }

    这样做是为了用！important覆盖原来的css样式，由于:lang选择器ie7。0并不支持，所以对这句话不会有任何作用，于是也达到了ie6。0下同样的效果，但是很不幸地的是，safari同样不支持此属性，所以需要加入以下css样式：

    #item:empty{

    backg肉nd:green！important

    }

    :empty选择器为css3的规范，尽管safari并不支持此规范，但是还是会选择此元素，不管是否此元素存在，现在绿色会现在在除ie各版本以外的浏览器上。对ie6和ff的兼容可以考虑以前的！important个人比较喜欢用第一种，简洁，兼容性比较好。