CSS+DIV浏览器兼容问题解决方法及网页设计的理解
展开全部
由于不同的浏览器，比如IE6,IE7,FF等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
CSS hack:区分IE6，IE7，firefox;区别不同浏览器，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;_background:blue;
background:orange;*background:green !important;*background:blue;
注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
IE6 IE7 FF
* √ √ ×
!important × √ √
浏览器优先级别:FF<IE7<IE6,CSS hack书写顺序一般为FF IE7 IE6
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
CSS hack:区分IE6，IE7，firefox;区别不同浏览器，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;_background:blue;
background:orange;*background:green !important;*background:blue;
注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
IE6 IE7 FF
* √ √ ×
!important × √ √
浏览器优先级别:FF<IE7<IE6,CSS hack书写顺序一般为FF IE7 IE6
参考资料： cjl
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
CSSHACK
区别IE6与FF：
background:orange;*background:blue;
background:orange;_background:blue;
background:blue;!important;background:orange;
区别IE6与IE7：
background:blue;!important;background:green;
background:green;_background:blue;
区别IE7与FF：
background:orange; *background:green;
区别FF，IE7，IE6：
background:orange;*background:blue;!important;background:green;
background:orange;*background:green; _background:blue;
…
注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
IE6支持下划线，IE7和firefox均不支持下划线。
IE6 IE7 FF
* √ √ ×
!important × √ √
_ √ × ×
区别IE6与FF：
background:orange;*background:blue;
background:orange;_background:blue;
background:blue;!important;background:orange;
区别IE6与IE7：
background:blue;!important;background:green;
background:green;_background:blue;
区别IE7与FF：
background:orange; *background:green;
区别FF，IE7，IE6：
background:orange;*background:blue;!important;background:green;
background:orange;*background:green; _background:blue;
…
注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
IE6支持下划线，IE7和firefox均不支持下划线。
IE6 IE7 FF
* √ √ ×
!important × √ √
_ √ × ×
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
有篇文章 你看看 也许对你有所帮助
CSS HACK
以下两种方法几乎能解决现今部分HACK。
1) !important
随着IE7对!important的支持，!important 方法现在只针对IE6的HACK。
(注意写法，记得该声明位置需要提前！)
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
2) IE6/IE77对FireFox
*+html 与 *html 是IE特有的标签， firefox 暂不支持.
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed */
}
注意:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明，”<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd“>”
CSS HACK
以下两种方法几乎能解决现今部分HACK。
1) !important
随着IE7对!important的支持，!important 方法现在只针对IE6的HACK。
(注意写法，记得该声明位置需要提前！)
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
2) IE6/IE77对FireFox
*+html 与 *html 是IE特有的标签， firefox 暂不支持.
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed */
}
注意:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明，”<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd“>”
参考资料： http://www.amoycloud.com/blog/article.asp?id=172
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
以前在学习CSS+DIV的时候也是一头雾水，在一个小小的结构问题上可以花了大半天的功夫，现在接触得多了，其实发现当时只是卡在几个非常细节的问题上：
第一种情况：火狐下是正常的，IE6下间距错乱，这种情况，通常应该检查边距MARGIN，可以试着到边距MARGIN换成填充PADDING，这样通常都可以解决问题，也就是说，我们尽量多的在需要使用边距MARGIN的用填充PADDING去代替。
第二种情况：FLOAT造成的页面错乱，FLOAT是CSS当中最常用到的一个代码，当一个大框架当中有好几个小框架FLOAT的时候会倒致大框架失去它的高度，这个时候我们就应该在所以小框架的最后面，加上一个clear:both来清除浮动。
关于网站建设的几点经验：
1、素材的收集，平时多浏览一些做得好的欧美网站，现在很多人都喜欢去考参一些韩国的酷站，个人觉得欧美网站的用户体验远远好于韩国酷站，也更符合国情。见到好的素材及时收集起来。网页设计是经验的积累，同时也是素材的一个积累。
2、颜色的处理，对颜色有了一定的理解之后，用不超过三种的主色调加浅的过渡色彩（比如很淡的灰色）。这样的网站，不一定美观，但一定不难看。
3、留白的处理，初学者和有经验的设计师最基本的区别就是间距的处理，好的用户体验网站，就是一个对留白处理得非常好的例子。
4、网页的统一性，色彩和框架的统一，大的方面来说，就是整个网站的标题，描述文字、边框颜色，背景，框架的形状。小的细节方面就是一个图标的颜色，一个需要强调的符号都有效果的统一起来。
5、在脑海里画效果图，这是一种设计思维，当你可以在效果图上把首页，或者是大致的元素都确定之后，就可以尝试基脑海中想象中其它页面的效果图的样子。这样便可以节省大量的去把你脑海中的东西画出来的时间。
第一种情况：火狐下是正常的，IE6下间距错乱，这种情况，通常应该检查边距MARGIN，可以试着到边距MARGIN换成填充PADDING，这样通常都可以解决问题，也就是说，我们尽量多的在需要使用边距MARGIN的用填充PADDING去代替。
第二种情况：FLOAT造成的页面错乱，FLOAT是CSS当中最常用到的一个代码，当一个大框架当中有好几个小框架FLOAT的时候会倒致大框架失去它的高度，这个时候我们就应该在所以小框架的最后面，加上一个clear:both来清除浮动。
关于网站建设的几点经验：
1、素材的收集，平时多浏览一些做得好的欧美网站，现在很多人都喜欢去考参一些韩国的酷站，个人觉得欧美网站的用户体验远远好于韩国酷站，也更符合国情。见到好的素材及时收集起来。网页设计是经验的积累，同时也是素材的一个积累。
2、颜色的处理，对颜色有了一定的理解之后，用不超过三种的主色调加浅的过渡色彩（比如很淡的灰色）。这样的网站，不一定美观，但一定不难看。
3、留白的处理，初学者和有经验的设计师最基本的区别就是间距的处理，好的用户体验网站，就是一个对留白处理得非常好的例子。
4、网页的统一性，色彩和框架的统一，大的方面来说，就是整个网站的标题，描述文字、边框颜色，背景，框架的形状。小的细节方面就是一个图标的颜色，一个需要强调的符号都有效果的统一起来。
5、在脑海里画效果图，这是一种设计思维，当你可以在效果图上把首页，或者是大致的元素都确定之后，就可以尝试基脑海中想象中其它页面的效果图的样子。这样便可以节省大量的去把你脑海中的东西画出来的时间。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
推荐答案说得很详细了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
