CSS＋div 设计的网页在不同浏览器中变形的问题经验+网络搜集整理，欢迎大家来发表自己的好方法
如何使网页在IE7.0和火狐中不变形?
以下的方法可行，但并不一定是最简单而有效的办法：    1 对于IE和火狐解析不一致的CSS属性，采用css hack 兼顾之;
征对不同浏览器写单独的几套层叠样式表，然后在页面用js根据浏览器版本动态加载与之对应的样式表。
*************************************************** *************************************************** ************
IE7.0只是IE6.0的升级，只是在安全性和易用性上有所增强。在使用上没什么区别。有的网页打不开，这可不关IE的事。原因很多，不好说。
PHP是一种动态网页。和HTML、ASP等一样，只是一种网页格式而已。IE6或IE7均能正常打开。
*************************************************** *************************************************** ************
火狐支不支持框架?我一网页用火狐会变形，如何解决?
火狐打不开银行网址和QQ空间，正如楼上所说，它是自主的内核，不基于IE内核，才会造成这样结果。不过如果你的IE被管理员锁的话还是能用火狐上网的哈!
老板这么要求了那只好让老板跟火狐的老板商量着让火狐换换内核了。
*************************************************** *************************************************** ************
为什么网页在IE中可以浏览，在FireFox里就变形了?    ie的有些模块Firefox不支持，但是很多在firefox里面能做出来的效果ie是看不见的
所以做网站是很需要考虑不同浏览器的兼容的
一般考虑火狐、IE、opera就可以了! *************************************************** *************************************************** ************
为什么在IE7下网页会变形??
关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助.
一、CSS HACK
以下两种方法几乎能解决现今所有HACK.
1, !important
随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)    , IE6/IE77对FireFox
*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.
注意:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明：
二、万能 float 闭合
关于clear float 的原理可参见[How To Clear Floats Without Structural Markup]
将以下代码加入Global CSS 中，给需要闭合的div加上即可，屡试不爽.
三、其他兼容技巧
1, FF下给 div 设置 padding 后会导致 width 和height 增加, 但IE不会.(可用!important解决)
html网页设计 table , 居中问题.
1).垂直居中.将 line-height 设置为当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
).水平居中. margin: 0 auto;(当然不是万能)
, 若需给 a 标签内内容加上样式, 需要设置 display: block;(常见于导航标签)
, FF 和 IE 对 BOX 理解的差异导致相差px 的还有设为float的div在ie下 margin加倍等问题.
, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
, 关于手形光标. cursor: pointer. 而hand 只适用于IE.
1 针对firefox ieie7的css样式
现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，
但是ie7对!important可以正确解释，会导致页面没按要求显示!到一个针
对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。
现在写一个CSS可以这样：
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE*/
*+html #1 { color: #999; } /* IE*/
那么在firefox下字体颜显示为#333，IE6下字体颜显示为#666，IE7下字体颜显示为#999。
css布局中的居中问题
主要的样式定义如下：
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 说明：
首先在父级元素定义TEXT-ALIGN: center；这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
盒模型不同解释
#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。