css hack
1. 在FireFox下,导航栏居中,但主体内容栏却是左对齐。
在div里的内容,IE默认为center,而FireFox默认为left。如果想要让其居中,刚需要在CSS中添加:
margin-left: auto; margin-right: auto;
这样就是告诉FireFox,左右一致,实现居中。(据说,这不是万能的。但我的皮肤居中了。)
2. 在FireFox下,有些效果不能兼容IE下的效果。例如,我的导航要求之间有10px的宽度(如果BLOG现在的皮肤是“SamTo”的话,可以看到效果),但是FireFox却不行。
我们可再添加一个padding-left:10px; 让FireFox实现这个效果,但你会发现在IE中,这个效果的宽度变成了20px。显然,这并不符合我的要求。
这里再要感叹一下,CSS的兼容和标准。首先来看一下,区别不同浏览器,CSS hack 的写法。
IE都能识别 * 标准浏览器(如FireFox)不能识别 *
IE6能识别 * 但不能识别 !important
IE7能识别 * 也能识别 !important
FF不能识别 * 但能识别 !important
IE6支持下划线 _ IE7和FireFox均不支持下划线
CSS支持语法
IE6
IE7
FireFox
*
√
√
×
!important
×
√
√
_
√
×
×
在书写CSS代码时,书写的顺序为FireFox的写在前面,IE7的写在中间,IE6的写在最后面。
所以,我的导航的CSS代码就写成:
padding-left:10px; * padding-left:0px; _ padding-left:0px;
在这里没有用 !important,因为没有效果。我用!important的结果就是,IE6和IE7不兼容,或IE7和FireFox不兼容。
转帖自“百度空间” http://hi.baidu.com/liuhuarun/blog/item/1a6fa8182bce30b34bedbc57.html
相关文档:
彻底弄懂CSS盒子模式(DIV+CSS)
非常好的DIV布局原理与实例教程,对WEB标准布局有兴趣的朋友可以看看以下内容:
Web标准,彻底弄懂CSS盒子模式一:DIV布局快速入门
Web标准,彻底弄懂CSS盒子模式二:导航栏实例详解
Web标准,彻底弄懂CSS盒子模式三:浮动的表演和清除的自述[1]
Web标准,彻底弄懂CSS盒子模式三:浮动的表演和清除 ......
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名.
CSS技巧
1.div的垂直居中问题
vertical-align:middl ......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Hack: 区分 I ......
注释用/**/。
不要在属性值与单位之间留有空格。假如你使用 “margin-left:20 px” 而不是 “margin-left:20px” (20和px之间有空格),它仅在 IE 6 中有效,但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。
外部样式表引用方式:<link rel="stylesheet" type="text/css" href="mystyle.cs ......