使用CSS解决不同浏览器的错位问题

用CSS+DIV来写网站代码的好处显而易见，这里不多说了，但由于不同浏览器对CSS的解释不统一，造成不同浏览器下页面错位的现象十分常见……
页面乱的原因是因为IE6认为一个DIV超宽了，所以把本应float;right的DIV挤了下去。而如果设置为IE6下显示正常的宽度，则在IE7和Firefox下看页面就会少了一块一样，也很别扭….  
怎么办？用CSS HACK 来改写CSS代码

改写前：xxx. yyy:{width:600px;} (当设为IE7和Firefox下显示正常的600px时，IE6下会错位，改为590px，则IE6下正常，IE7和Firefox下显示不完美)
改写后： xxx. yyy{width:600px;* width:600px;_ width:590px;}
（Firefox不认识*和_，而IE都认识*，IE7不支持_，IE6支持_）
顺序千万不要乱，因为当出现重复定义时，浏览器默认按最后一下渲染，所以一定要先正常，再*，最后_。
这样Firefox读取时只看到了正常的定义，而IE都能看到第二个*的定义，于是忽略第一个正常的定义，而IE中因为IE7不再支持_，所以按照第一个带*号的执行，IE6支持_，所以认为带*后的也是重复定义，予以忽略，执行最后一个定义。

有人喜欢用!important来进行CSS HACK，但我觉得!important写起来太长了，不如*和_简单直观。

只要记住IE7=*，IE6=_，然后按照先Firefox后IE7，最后IE6的顺序进行编写，一般就可以保证大部分用户浏览正常了。

页面html错位的常见原因以及解决方案：

引起网页HTML显示错位的几个常见问题：

         1、在HTML代码中缺失元素的开始或结束标签

         2、CSS设置中对边界、填充或边框的设置超出了父级容器的范围

         3、CSS和HTML的编码不统一

         4、浏览器的解析问题（这个问题是最容易出现的，同时也是最难解决的）

以上4点大致可以归为引用网页HTML显示错位的元凶，现在，分别来讨论一下如何解决上述出现的4种问题

         1、在HTML代码中缺失元素的开始或结束标签

答：这个问题看似比较简单，但是也是大多数人最容易犯的问题，在现实的工作中，我们一般都是用开发工具，如Dreamweaver或Editplus等一些高级的编辑器，虽然这些工具在一定程度上减少了我们的工作量，但是随之出现的问题也多了起来，毕竟这些工具在做语法检测时，不可能做到像人工检查那样细致。所以当代码量达到一定的量的时候，就会乱，我们在修改其中内容时，如删除或修改都有可能只改了前一半，但是没有改后一半。出现这种情况，我们也要使用一些手段来应对，办法也很简单，那就是多写注释。（）一个良好的代码工，对注释的要求也是非常高的。一个优秀的应用，同样也不可能少了注释。养成一样良好的书写习惯，为以后的工作奠定基础。

         2、CSS设置中对边界、填充或边框的设置超出了父级容器的范围

答：在解释这个问题之前，先让大家清楚一下子父级关系，如：

        

                  

                            这里是内容

        

在上述代码中，div就为父级容器，而table就为子元素，看注释，在class样式中，明明对div设置的是宽500px，高200px；表格也设置的是宽500px，高200px。但是就是出现错位。是因为table中设置的border=”10”，这样就会为table的上下左右边框各加10px。所以实质上table的宽度为520px，高度为200px。这样一来，就超出了div的宽高，所以有可能会出现错位。修改方法，将div的宽高各加20px，或把table的宽高各减20px。

         3、CSS和HTML的编码不统一

答：这个问题出现的机率不大，但是也可能出现。废话少说，直奔主题，如CSS样式表文件的编码是GBK，而HTML的编码为UTF-8，这样你在HTML文件中使用link标签引用CSS样式表文件时，没错，但是在浏览器解析时会出错。原因有了，修改也很简单，将编码统一就OK了。步骤：记事本打开文件—另存为UTF-8（GBK）编码。

         4、浏览器的解析问题

答：这个问题是最容易出现的，因为在现实中我们所做的网站可能会在不同的浏览器下跑，所以这时候就得考虑浏览器的兼容性问题。先来解释一下浏览器不兼容是如何产生的，主流浏览器IE、Firefox、Google等，这些浏览器厂商为了让自己的浏览器的市场更广，所以不会去顾及标准，他们会以自己的解析为标准去解析HTML文件。这使得IE、Firefox、Google等浏览的解析标准是不同的，所以就产生了浏览器的不兼容。这是引起浏览器不兼容最原始的凶手，但是我们却改变不了这种现状，所以这点我们不考虑。我们要考虑的是规范自己的HTML和CSS代码。

A.     规范HTML：这个相对来说比较容易，在HTML的头部都有一个DTD的约束，你只需要把这个DTD文件下载下来，然后查看这个DTD文件里的内容，这里面包含了一些HTML的书写规范，如一个页面中都可以出现哪些元素，这些元素都有哪些属性等等。只要将其看懂了，HTML自然也就规范了。在HTML规范这里要注定的是布局规范，好多朋友的代码看起来很强大，但其实上很乱。用了float后就要对父容器做出clear。

B.     规范CSS：这个说起来比较困难，如CSS也是有许多不常见的写法的，如!important、_width:20px、max-height:60px等等一些比较怪异的写法。下面来一一解释。

a)        !important是改变优先级的，如有两个css文件同时定义了一个.layout{}的样式，但是其中的宽度不一样，一个是50px，一个是100px，这样写出来就会以后面调用那个起作用，但是你如果就想让前一个作用怎么办，加!important就可以了。写法：.layout{width:50px!important;}

b)        在样式前加下划线“_”，这是设置只在IE6内核浏览器下起作用的，有时候IE6和IE8显示效果不一样，就可以用这种方法来调试。写法：.layout{_width:20px;}

c)        Max和min，顾名思义，最大和最小。这种写法就是规定这个元素的最大值和最小值。如max-height就是说最大的高度是多少，如果不满最大值，则以height设置的为准。

d)        最后一点，在HTML中body,ul,ol,input,form,dd,dt,dl,h1,h2,h3,h4,h5,h6等元素默认是有margin和padding的。在用这前，我们可以将这些元素的margin和padding清0。

好了，说了这么多，希望HTML的爱好者们借鉴一下，也希望说的不对的地方，请大家提出宝贵的意见，帮助俊南多多提高自身能力。