前端技术| 在这个大都市，我只需要一个角落，用来记录我的生活| 都市de角落

Archive for ‘ 前端技术 ’

全兼容的纯CSS级联菜单要点浅析 14 九月 2009 at 2:01 下午 by 蜗牛 134 views

参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 操作系统：Windows 蓝色理想经典论坛首发，转载请注明出处这次给项目做的级联菜单使用了纯CSS的方式，霍霍，能用CSS做的，就用CSS完成吧。早已有前辈完成过这样的实例了，我以为我能顺利完成，但没想到处处碰壁，故记录一点心得如下，供大家参阅。废话不多说，咚咚咚，开始制作啦！除了IE6这个坚强的孩子，其他浏览器攻克还是比较容易的。

<!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″ />
<meta name=”author” content=”Chomo” />
<link rel=”start” href=”http://www.14px.com” title=”Home” />
<title>三级级联菜单</title>
<style type=”text/css”>
* { margin:0; padding:0; list-style:none;}
.c_subNav { width:150px; }
.c_subNav a { text-decoration:none; color:#333;}
.c_subNav a:hover { color:#f60;}
.c_subNav ul ul { position:absolute; display:none; right:-150px; top:-1px;}
.c_subNav li { border-bottom:1px solid #ccc; position:relative; _position:static; float:left; width:100%;}
.c_subNav a.li { position:relative;}
.c_subNav li .option { display:block; line-height:15px; padding:5px 5px 5px 25px; background:no-repeat 5px 4px; cursor:pointer; font:12px Verdana; zoom:1; background:url(http://www.14px.com/wp-content/uploads/2009/05/ico.gif) no-repeat;}
.c_subNav li .option:hover { color:#f60; background-color:#ffa;}
.c_subNav li .option span { display:block; padding-right:15px; background:url(http://www.14px.com/wp-content/uploads/2009/05/ico.gif) no-repeat right 0;}
.c_subNav li .option:hover span { background-position:right -15px;}
.c_subNav .li:hover { z-index:2; background:transparent;}
.c_subNav .li:hover ul { display:block;}
.c_subNav .li:hover ul ul { display:none;}
.c_subNav .li:hover ul { border:1px solid #ccc; border-width:1px 2px 2px 1px; width:150px; background:#fff; padding:1px;}
.c_subNav .li:hover li { border-bottom:none;}
.c_subNav .li:hover li .option { padding:2px 5px; background:transparent;}
.c_subNav .li:hover li .option:hover { background:#0096ff; color:#fff;}
.c_subNav .li:hover li .option:hover span { background-position:right -30px;}
.c_subNav .li:hover .li:hover ul { display:block; left:145px; top:-2px;}
.c_subNav .charges .option { background-position:4px -45px;}
.c_subNav .biz .option { background-position:4px -70px;}
.c_subNav .change .option { background-position:4px -95px;}
.c_subNav .score .option { background-position:4px -120px;}
.c_subNav .server .option { background-position:4px -145px;}
.c_subNav .edit .option { background-position:4px -170px;}
.c_subNav .sms .option { background-position:4px -195px;}
</style>
</head>
<body>
<div>
<ul>
<li>
   <a href=”#nogo”><span>话费服务</span></a>
   <ul>
    <li>
     <a href=”#nogo”><span>话费查询</span></a>
     <ul>
      <li><a href=”#nogo”>实时话费查询</a></li>
      <li><a href=”#nogo”>话费余额查询</a></li>
      <li><a href=”#nogo”>月账单查询</a></li>
      <li><a href=”#nogo”>月详单查询</a></li>
      <li><a href=”#nogo”>缴费历史查询</a></li>
      <li><a href=”#nogo”>资费优选推荐</a></li>
     </ul>
    </li>
    <li>
     <a href=”#nogo”><span>定制话费信息</span></a>
     <ul>
      <li><a href=”#nogo”>定制短信账单</a></li>
      <li><a href=”#nogo”>话费余额短信提醒</a></li>
      <li><a href=”#nogo”>定制Email账单</a></li>
     </ul>
    </li>
    <li>
     <a href=”#nogo”><span>网上交费</span></a>
     <ul>
      <li><a href=”#nogo”>网上缴费</a></li>
      <li><a href=”#nogo”>充值卡缴费</a></li>
     </ul>
    </li>
   </ul>
</li>
<li>
   <a href=”#nogo”><span>业务办理</span></a>
   <ul>
    <li>
     <a href=”#nogo”><span>日常业务办理</span></a>
     <ul>
      <li><a href=”#nogo”>来电显示</a></li>
      <li><a href=”#nogo”>呼叫等待</a></li>
      <li><a href=”#nogo”>呼叫转移</a></li>
      <li><a href=”#nogo”>三方通话</a></li>
      <li><a href=”#nogo”>来电提醒</a></li>
      <li><a href=”#nogo”>呼叫保持</a></li>
      <li><a href=”#nogo”>呼叫转移设置</a></li>
      <li><a href=”#nogo”>主叫隐藏</a></li>
      <li><a href=”#nogo”>彩铃</a></li>
      <li><a href=”#nogo”>国内漫游</a></li>
      <li><a href=”#nogo”>短信回执</a></li>
      <li><a href=”#nogo”>12580综合信息</a></li>
      <li><a href=”#nogo”>关爱一线通</a></li>
     </ul>
    </li>
    <li>
     <a href=”#nogo”><span>数据业务</span></a>
     <ul>
      <li><a href=”#nogo”>手机上网</a></li>
      <li><a href=”#nogo”>GPRS</a></li>
      <li><a href=”#nogo”>飞信</a></li>
      <li><a href=”#nogo”>手机报</a></li>
      <li><a href=”#nogo”>无线音乐俱乐部</a></li>
      <li><a href=”#nogo”>手机邮箱</a></li>
      <li><a href=”#nogo”>号簿管家</a></li>
      <li><a href=”#nogo”>WLAN业务</a></li>
      <li><a href=”#nogo”>彩乐短信</a></li>
     </ul>
    </li>
    <li>
     <a href=”#nogo”><span>手机报停/报开</span></a>
     <ul>
      <li><a href=”#nogo”>手机报停</a></li>
      <li><a href=”#nogo”>手机复机</a></li>
     </ul>
    </li>
    <li>
     <a href=”#nogo”>梦网查询与退订</a>
    </li>
   </ul>
</li>
<li>
   <a href=”#nogo”><span>套餐办理与变更</span></a>
   <ul>
    <li><a href=”#nogo”>GPRS套餐变更</a></li>
    <li><a href=”#nogo”>产品变更</a></li>
   </ul>
</li>
<li>
   <a href=”#nogo”><span>积分计划</span></a>
   <ul>
    <li><a href=”#nogo”>积分查询</a></li>
    <li><a href=”#nogo”>积分兑换</a></li>
    <li><a href=”#nogo”>积分明细查询</a></li>
    <li><a href=”#nogo”>积分兑换话费</a></li>
    <li><a href=”#nogo”>积分兑换历史查询</a></li>
   </ul>
</li>
<li>
   <a href=”#nogo”><span>在线客服</span></a>
   <ul>
    <li><a href=”#nogo”>号码归属地查询</a></li>
    <li><a href=”#nogo”>营业厅查询</a></li>
    <li><a href=”#nogo”>手机仿真</a></li>
    <li><a href=”#nogo”>在线咨询</a></li>
   </ul>
</li>
<li>
   <a href=”#nogo”><span>个人信息管理</span></a>
   <ul>
    <li><a href=”#nogo”>个人资料修改</a></li>
    <li><a href=”#nogo”>服务密码变更</a></li>
    <li><a href=”#nogo”>服务密码重置</a></li>
    <li><a href=”#nogo”>PUK码查询</a></li>
    <li><a href=”#nogo”>套餐使用状态查询</a></li>
    <li><a href=”#nogo”>业务开通状态查询</a></li>
   </ul>
</li>
<li>
   <a href=”#nogo”>短信息服务</a>
</li>
</ul>
</div>
</body>
</html>

该实例完成大概就两个要点：

忌浮忌躁，一步步来，先把最低级的display:none;做。
“:hover伪类”的使用，默认状态“display:none;”，“:hover”时则“display:block;”则能很容易完成。

而IE6下折腾就比较复杂了，经过头破血流的教训之后，总结出关键四点：

1. 原理：IE6仅<a>标签支持:hover伪类，但如果a标签里面再嵌入a标签，里面的a标签将不会生效，所以必须在之间套加一层<table>；

<!–[if IE 6]><a href=”#nogo”><table><tr><td><![endif]–>
内容部分可以含有<a>标签
<!–[if IE 6]></td></tr></table></a><![endif]–>

2. 关键样式名：这个用于:hover效果的a标签的命名，如果使用与<li>一致的样式名（在非IE6中是li:hover产生的效果），将不用再另写样式代码，不仅节省了代码开销，而且可维性更好；（这个是省时省力的关键）

<li>
<!–[if IE 6]><a href=”#nogo”><table><tr><td>
<![endif]–>
内容部分可以含有<a>标签
<!–[if IE 6]></td></tr></table></a><![endif]–>
</li>

3. visibility的使用：采用display的话将出现onmouseout时上一次显示的optionGroup仍然不消失的情况

.c_subNav .li:hover ul { visibility:visible;}

4.table的设置： [含泪ing]table一定要记得width:100%;啊，一定要记得啊，一定要记得啊，一定要记得啊。

Possibly Related Posts:

Share/Save

Under : 前端技术
Tags: CSS, 菜单

+ PNG图片在IE6下面透明显示的一点分享 By 蜗牛 10 九月 2009 at 10:02 上午 159 views and have No Comments

因为工作需要，页面上面需要大量放置PNG透明图片，FF/IE7及以上版本已经能够很好的支持它的透明效果，但是IE6如果解决？对很多高手来说这个问题属于老生常谈，不过今天还是分享出来跟那些刚刚接触到这块的朋友，在网上一搜会有各种各样的方法来解决，可是这些方法并不是什么时候都适用，多少都会遇到问题，今天我把我认为最有效的方法告诉大家，只需将附件中的unitpngfix.js文件加入到<head></head>里面就可以了。

<!–[if lt IE 7]>

<![endif]–>

不过这个方法有个BUG，当在PNG背景的DIV里面插入以图片做连接的内容，这个连接在IE6下无效，这种解决办法就是在DIV外面加浮动层放到上面，不过遇到这种状况的几率应该是不大的。

PNG在IE6下透明解决办法.js

Possibly Related Posts:

Share/Save

+ 轻松搞定IE的CSS制作网页技巧3则 By 蜗牛 17 八月 2009 at 9:55 上午 127 views and have No Comments

众所周知道，IE向来是我们在制作网页时最难搞定的对手。但又迫于其用户群数量之多，我们不得不想法设法搞定它。下面，将介绍的将是利用其特点而被发现/创造出来的CSS技巧。让你轻松搞定这个难对付的家伙。

IE注释：最安全的HACK IE的途径

这应该是我最常用的方法了，一般情况下，我们现在已经不用考虑IE5或者以下的浏览器了，这个注释让我们可以轻松HACK IE，并且它是最安全的方法，因为别的浏览器不会显示/识别它（这里应该感谢微软的细心，即使他精粗心在先）。

至于IE8 beta，以其为主浏览器的用户算起来应该不到K级，也暂时不是我们应该搞定的对象（当然，搞定它是最好不过的事）。或者我们应该把希望放在他正式版对CSS完美的支持，而现在我们把最重要的放在搞定IE6
/IE7，区分它们，我最常用的是下面的代码：

#forieothers{…} // 用这个搞定IE7

*html #forie6{…} // 当然，这是写给IE6的

而你需要注意的就是，别把它们的顺序写倒了，因为#forieothers这个是会被IE6看到的，而根据CSS书写顺序的优先性，应该把让*html #forie6写在后面，让浏览器最终显示它，但IE7又看不到。

让IE6支持PNG透明图片
#regular_logo

{
background:url(’test.png’); width:150px; height:55px;
}
/* \ */
* html #regular_logo
{
background:none;
float:left;
width:150px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’test.
png’, sizingMethod=’scale’);
}
/* */

这并不是我喜欢的方法，不过，或许你会喜欢。当然，有时候，我们导出GIF图片的时候，其效果和质量都可能不是很好，搞定PNG或许就是为这个而做的吧。也可能是由于自己并不是画图的高手，所以，比较少用。

让IE6支持min-width/max-width
#container

{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? “600px” :
document.body.clientWidth > 1200? “1200px” : “auto”);
}

这应该是非常重要的技巧，也是比较常用的。就像，你以前可能用了太大的图片，但现在又想用一个栏比较小的主题，这时，这个方法就显得异常重要。抑或是，如果你想创建一个流体布局，这个代码对你来说是必不可少的。

当然，这三个并不能让你搞定所有IE的问题。不过，这应该是最重要的。IE注释通常被CSS新手忽略，而IE6显示透明PNG和IE6支持最小/最大宽度是难点。好吧，我想，看到这里，或许你已经学会了，或者，至少知道这是解决方法。但或许还有一句话你应该记住：少骂IE，完善自己！

Possibly Related Posts:

Share/Save

+ CSS浏览器兼容方案 By 蜗牛 30 七月 2009 at 11:40 上午 151 views and have No Comments

网页设计遇到最大的麻烦之一莫过于网页对不同浏览器的兼容性问题了，因为IE 6.0 / IE 7.0 / firefox 2 / Opera 9等主流浏览器对CSS解析不近相同，导致设计的页面效果不一样，所以用什么方法可以有效解决不同浏览器不同页面效果的问题呢？广泛被使用的方法就是CSS Hack，即使用特别的CSS定义显示网页在不同浏览器的设计风格，针对不同的浏览器去写不同的CSS，最大化兼容浏览器。
一般情况下，我都会兼顾IE 6.0 / IE 7.0 / firefox 2.0浏览器，下面是用的较频繁的CSS Hack技巧：
用的最广莫过于!important了，它可以针对IE（IE 7.0能正确理解!important）和非IE浏览器设置不同的样式，只要在非IE浏览器样式的后面加上!important，就可以针对其优先了。所以为了兼顾IE 6.0与火狐之间的差异，我都会使用!important。

1、仅IE7与IE5.0可以识别
*+html select {…}
当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。
2、仅IE7可以识别
*+html select {…!important;}
当面临需要只针对IE7做样式的时候就可以采用这个HACK。
3、IE6及IE6以下识别
* html select {…}
这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。
4、html/**/ >body select {…}
这句与上一句的作用相同。
5、仅IE6不识别，屏蔽IE6
select { display /*屏蔽IE6*/:none;}
这里主要是通过CSS注释分开一个属性与值，注释在冒号前。
6、仅IE6与IE5不识别，屏蔽IE6与IE5
select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽IE5.5
7、仅IE5不识别，屏蔽IE5
select/*IE5不识别*/ {…}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别，IE5.5可以识别。
8、盒模型解决方法
selct {width:IE5.x宽度; voice-family :”\”}\””; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。这点要明确。
9、只有Opera识别
@media all and (min-width: 0px){ select {……} }
针对Opera浏览器做单独的设定。
以上都是写CSS中的一些HACK，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。
10、IE5.x的过滤器，只有IE5.x可见
@media tty {
i{content:”\”;/*” “*/}} @import ‘ie5win.css’; /*”;}
}/* */
11、IE5/MAC的过滤器，一般用不着
/*\*//*/
@import “ie5mac.css”;
/**/
——————————————————————–
12、IE的if条件Hack

<!–[if IE]> Only IE <![endif]–> 所有的IE可识别
<!–[if IE 5.0]> Only IE 5.0 <![endif]–> 只有IE5.0可以识别
<!–[if gt IE 5.0]> Only IE 5.0+ <![endif]–> IE5.0包换IE5.5都可以识别
<!–[if lt IE 6]> Only IE 6- <![endif]–> 仅IE6可识别
<!–[if gte IE 6]> Only IE 6/+ <![endif]–> IE6以及IE6以下的IE5.x都可识别
<!–[if lte IE 7]> Only IE 7/- <![endif]–> 仅IE7可识别
—————————————————————–
你在写css时样式表加上浏览器标识符就行了,各浏览器区别如下:
IE都能识别*，标准浏览器（如FF）不能识别*；
IE6能识别*，但不能识别 !important；
IE7能识别*，也能识别 !important；
FF不能识别*，但能识别 !important；
例如style=”*width:10px;!important width:20px;”
这样在IE6下宽度为10px,在IE7下宽度时20px
—————————————————————–

最新的CSS兼容方案，让你的样式完美兼容各大浏览器，这个方案主要是用来解决Safari的，Opear是在测试的时候顺带试了一下，结果发现竟然也行，所以顺便也解决了。
.e {/*FF OP*/
background-color: #FF0000
}
html* .e{/*Sa IE7 OP*/
background-color:#FF00FF
}
*+html .e{
background-color:#000000;/*OP*/
*background-color:#0000FF;/*IE7*/
}
* html .e{/*IE6*/
background-color:#00FFFF
}
经FF2、OP9.21、OP9.10、Sa3.0.3(pc)、IE7、IE6测试通过，如果你在其他的浏览器版本上测试过，欢迎给我留言，把结果告诉我。
需要注意的是：IE7对样式的解释跟DTD是有关，在没有DTD的时候，IE7是能读取IE6的hack的。

Possibly Related Posts:

Share/Save

+ CSS实现完美垂直居中 By 蜗牛 24 七月 2009 at 3:16 下午 145 views and have No Comments

之前看到很多人一直都问这个问题，不过当时我没当一回事，因为在 CSS 中要垂直居中，多数是在有高度的情况下，或者容器高度不定的情况下才用，看上去比较舒服，而且实现的方法也不少，不一定要拘泥于和 table 布局一样。不过最近有人问了几个例子，看来对此的需求还不少。现在就把我经验拿出来分享一下，希望大家鼓鼓掌。

首先，要有一个概念：凡是 table 布局可以实现的，CSS 一定可以实现。CSS 可以实现的，table 未必能做到。

现在来几个例子：

一、单行内容的居中
只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置 line-height 和 height，并使两值相等，再加上 over-flow: hidden 就可以了

.middle-demo-1{
height: 4em;
line-height: 4em;
overflow: hidden;
} 优点：
1. 同时支持块级和内联极元素
2. 支持所有浏览器
缺点：
1. 只能显示一行
2. IE中不支持等的居中
要注意的是：
1. 使用相对高度定义你的 height 和 line-height
2. 不想毁了你的布局的话，overflow: hidden 一定要
为什么？
请比较以下两个例子：

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]
上一个高度是用的绝对单位px，并且没有隐藏溢出，下一个高度用的单位是相对单位em，并且隐藏了溢出。如果你的浏览器支持放大字体，那么尽情地放大字体，看看会出现什么效果。

二、多行内容居中，且容器高度可变
也很简单，给出一致的 padding-bottom 和 padding-top 就行

.middle-demo-2{
padding-top: 24px;
padding-bottom: 24px;
} 优点：
1. 同时支持块级和内联极元素
2. 支持非文本内容
3. 支持所有浏览器
缺点：
容器不能固定高度

三、把容器当作表格单元
CSS 提供一系列diplay属性值，包括 display: table, display: table-row, display: table-cell 等，能把元素当作表格单元来显示。这是再加上 vertical-align: middle, 就和表格中的 valign=”center” 一样了。

.middle-demo-3{
display: table-cell;
height: 300px;
vertical-align: middle;
}
可惜IE不支持这些属性，不过在其他浏览器上显示效果非常完美。
要注意的是：和一个合法的元素必须在

里一样，display: table-cell 元素必须作为 display: table 的元素的子孙出现。

优点：
不用说了吧，就是表格，效果和表格一模一样
缺点：
IE下无效

四、以毒攻毒！用 IE 的 bug 解决 IE 中的绝对居中
先不得不说一句，IE 真的是个很烂的浏览器，CSS1中的定义都不支持，害得要我们转个大圈子来造居中。不过就像我说的，凡是 table 布局可以实现的，CSS 一定可以实现，即使在 IE 里也不例外。我研究 IE layout 模式多年，还是找出了一个可以在 IE 中绝对居中的方法。这个方法就是基于 IE layout 的 bug，也可以算以毒攻毒。至于原理，不要问我，这是独门秘学，何况三言两语也讲不清楚，只要好用就行

.middle-demo-4{
height: 300px;
position: relative;
}
.middle-demo-4 div{
position: absolute;
top: 50%;
left: 0;
}
.middle-demo-4 div div{
position: relative;
top: -50%;
left: 0;
} 五、整合三和四，写出支持所有浏览器的垂直居中容器！
思路是利用 IE 和非IE 浏览器的 CSS hack, 整合三和四的CSS，写出兼容主流浏览器的垂直居中容器。具体代码就不给出了，大家权当作练习练习。例子可以在下面的附录中找到。
最终实测支持的浏览器：IE6+, Mozilla 1.7, Netscape Navigator 8, Opera 8.0+, Firefox 1.0+ 和 Safari 1.0+IE5 下需要加上对合适模型的补正。
推测支持的浏览器：Mozilla 1.5+, Netscape Navigator 7+, Opera 7+
未测试浏览器：Konqueror

Possibly Related Posts:

Share/Save

+ css命名规则 By 蜗牛 17 七月 2009 at 6:40 下午 155 views and have No Comments

由于项目中编写文档结构、编写CSS的人员较多，并与程序员协同工作，所以就需要统一开发规范，根据XHTMl和CSS编织的规范和大多人的习惯，整理了以下针对本项目的一个简单的开发规范：

一、CSS文件及样式命名

1、CSS文件命名规范

全局样式：global.css；

框架布局：layout.css；

字体样式：font.css；

链接样式：link.css；

打印样式：print.css；

2、CSS样式命名规范

本人建议：用字母、_号工、-号、数字组成，必须以字母开头，不能为纯数字。为了开发后样式名管理方便，大家请用有意义的单词或缩写组合来命名，让同事一看就明白这样式大概是哪一块的，这样就节省了查找样式的时间，例如：

头部样式用header，头部左边，可以用header_left或header_l,还有如果是列结构的可以这样——box _1of3 (三列中的第一列)，box_2of3 (三列中的第二列)、box _3of3 (三列中的第三列)，其它的我就不一一举例了，大家按以上规律去命名就好。

下面列出一些常用的命名单词方便大家使用：（以后大家工作过程中慢慢把自己积累的单词都共享出来，那大家的命就会更加统一了，就不会有一义多词的情况了。）

容器：container/box

头部：header

主导航：mainNav

子导航：subNav

顶导航：topNav

网站标志：logo

大广告：banner

页面中部：mainBody

底部：footer

菜单：menu

菜单内容：menuContent

子菜单：subMenu

子菜单内容：subMenuContent

搜索：search

搜索关键字：keyword

搜索范围：range

标签文字：tagTitle

标签内容：tagContent

当前标签：tagCurrent/currentTag

标　题：title

内容：content

列表：list

当前位置：currentPath

侧边栏：sidebar

图标：icon

注释：note

列定义：column_1of3 (三列中的第一列)

column_2of3 (三列中的第二列)

column_3of3 (三列中的第三列)

二、id和class的使用及区别

我们知道在样式表定义一个样式的时候，可以定义id也可以定义class，例如：

ID方法：#test{color:#333333}，在页面中调用<div id=”test”>内容<div>

CLASS方法：.test{color:#333333}，在页面中调用<div>内容<div>

id一个页面只可以使用一次，class可以多次引用。

我在页面中用了多个相同id在IE中显示也正常，id和class好象没什么区别，用多个相同id有什么影响吗？

页面存在多个相同的ID影响就是不能通过W3的校验。

在页面显示上，目前的浏览器还都允许你犯这个错误，用多个相同ID“一般情况下”也能正常显示。但是当你需要用JavaScript通过id来控制这个div，那就会出现错误。

id是一个标签，用于区分不同的结构和内容，就象你的名字，如果一个屋子有2个人同名，就会出现混淆；

class是一个样式，可以套在任何结构和内容上，就象一件衣服；

概念上说就是不一样的：

id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。

也就是说建议大家在写XHML+CSS时如果是维一的结构定位的就用id，否则就用class吧（这样让出非结构定位的div块的id让程序员自己定义使用）

web标准希望大家用严格的习惯来写代码。

三.使用css缩写

使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。常用的css缩写的主要规则：

颜色

16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：

#000000可以缩写为#000;#336699可以缩写为#369;

盒尺寸

通常有下面四种书写方法:

property:value1; 表示所有边都是一个值value1；

property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2

property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3

property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left

方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：

margin:1em 0 2em 0.5em;

边框(border)

边框的属性如下：

border-width:1px;

border-style:solid;

border-color:#000;

可以缩写为一句：border:1px solid #000;

语法是border:width style color;

背景(Backgrounds)

背景的属性如下：

background-color:#f00;

background-image:url(background.gif);

background-repeat:no-repeat;

background-attachment:fixed;

background-position:0 0;

可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0;

语法是background:color image repeat attachment position;

你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：

color: transparent

image: none

repeat: repeat

attachment: scroll

position: 0% 0%

字体(fonts)

字体的属性如下：

font-style:italic;

font-variant:small-caps;

font-weight:bold;

font-size:1em;

line-height:140%;

font-family:”Lucida Grande”,sans-serif;

可以缩写为一句：font:italic small-caps bold 1em/140% “Lucida Grande”,sans-serif;

注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。

列表(lists)

取消默认的圆点和序号可以这样写list-style:none;

list的属性如下:

list-style-type:square;

list-style-position:inside;

list-style-image:url(image.gif);

可以缩写为一句：list-style:square inside url(image.gif);

更多属性写法请参考《CSS样式手册》，在线手册地址：http://www.86w3.com/css/

四、明确定义单位，除非值为0

忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。

五、区分大小写

当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。

class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。

六、取消class和id前的元素限定

当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，class可以在页面中多次使用。你限定某个元素毫无意义。例如：

div#id1{}可以写成#id1{}

这样可以节省一些字节。

七、默认值

通常padding和margin的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样：

* {

padding:0;

margin:0

}

或者是针对某元素来定义：

ul,li,div,span {

padding:0;

margin:0

}
八、CSS的优先级
行内样式(inline style) > ID选择符 > 样式(class),伪类(pseudo-class)和属性(attribute)选择符 > 类别(type)，伪对象(pseudo-element)

解释:

*内联样式(inline style)：元素的style属性，比如 <div style=”color:red;”></div> ,其中的color:red;就是行内样式

*ID选择符：元素的id属性，比如 <div id=”content”></div> 可以用ID选择符#content

*伪类(pseudo-class)：最常见的是锚(a)伪类，比如a:link,a:visited.

*属性选择符(attribute selectors)：比如div[class=demo],含有class为demo的div元素

*类别选择器(type selector)：HTML标签选择，比如div .demo,div元素下含有class为demo的元素

*伪对象选择器(pseudo-element selector)：比如div:first-letter,div元素下的第一个单词。

九、不需要重复定义可继承的值

CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义，除非是为了更变当前元素样式不使用父元素的属性值，但是要注意，浏览器可能用一些默认值覆盖你的定义。

十.多重CSS样式定义，属性追加重复最后优先原则

一个标签可以同时定义多个class，也可以是同一个class中重复定义属性。例如：

我们先定义两个样式

.one{width:200px;background:url(http://www.86w3.com/1.jpg) no-repeat left top;}

.two{border:10px solid #000; background:url(http://www.86w3.com/2.jpg) no-repeat left top;}

在页面代码中，我们可以这样调用:

这样最终的显示效果是这个div样式是什么呢？？重复的是以哪一个为准呢？？

<div two></div>应用到的样式如下：

width:200px;

border:10px solid #000;

background:url(http://www.86w3.com/2.jpg) no-repeat left top;

因为，当应用两个或多个样式时，浏览器所应用的样式根据是属性追加重复最后优先原则

就是说两个或多个或重复的样式名定义，浏览器所应用的样式是按先后顺序的，如果定义了重复的属性值，以最后定义的为准，如果应用了两个或多个样式名，里面不重复定义的属性值就追加上去，重复的属性值就以最后一个为准。这里要注意的是，样式的先后不是根据页面上应用的名字顺序，而是样式表里的样式顺序。

十一、使用子选择器(descendant selectors)

使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码：

<ul>

</ul>

</div>

这段代码的CSS定义是：

div#subnav ul { }

div#subnav ul li.subnavitem { }

div#subnav ul li.subnavitem a.subnavitem { }

div#subnav ul li.subnavitemselected { }

div#subnav ul li.subnavitemselected a.subnavitemselected { }

你可以用下面的方法替代上面的代码

</ul>

样式定义是：

#subnav { }

#subnav li { }

#subnav a { }

#subnav .sel { }

#subnav .sel a { }

用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。

如果一个容器里有多个同样的元素，而且这些元素样式都不一样，请避免用这个方式，建以采用不同的class如：

十二、不需要给背景图片路径加引号

为了节省字节，我建议不要给背景图片路径加引号，因为引号不是必须的。例如：

background-image:url(“images

margin:0 auto;

}

但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：用text-align属性。就象这样：

body {

text-align:center;

}

#wrap {

width:760px;

margin:0 auto;

text-align:left;

}

第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。

十七.导入(Import)和隐藏CSS

因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如：

@import url(main.css);

然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法：

@import main.css;

这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。想了解@import语法的详细说明，可以看这里《centricle’s css filter chart》

十八、CSS hack

有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。

1.注释的方法
(a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):

html>body p {

}

(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)

* html p {

}

(c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用反斜线技巧：

* html p {

declarations

}

(d)下面这个写法只有IE7浏览器可以理解(对其他浏览器都隐藏)

*+ html p {

}

2.条件注释(conditional comments)的方法
另外一种方法，我认为比CSS Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。就象这样：

<!–[if IE]>

<![endif]–>

还有更多的CSS hack大家可以通过网上找找，但是有很多hack都是不符合w3c标准的，本人根据以上的hack写了一个能区分IE6、IE7、FF的样式，而且可以符合w3c标准,代码如下：

.classname {width:90px!important;width:100px;}

*+html .classname {width:95px!important;}

这样写后在IE6下宽是100px，IE7下是95px，火狐下是90px。

十九.调试技巧：层有多大？

当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。

另外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。

二十、CSS代码书写样式

在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯。在经过不断实践后，我决定采用下面这样的书写样式：

.classname {

width:100px;

}

当使用联合定义时，我通常将每个选择器单独写一行，这样方便在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格，每个定义也单独写一行，分号直接在属性值后，不要加空格。

我习惯在每个属性值后面都加分号，虽然规则上允许最后一个属性值后面可以不写分号，但是如果你要加新样式时容易忘记补上分号而产生错误，所以还是都加比较好。

最后，关闭的大括号}单独写一行。空格和换行有助与阅读。

Possibly Related Posts:

Share/Save

+ CSS:浮动清理，不使用 clear:both标签 By 蜗牛 15 七月 2009 at 10:20 上午 163 views and have No Comments

在进行浮动布局时，大多数人都深知，在必要的地方进行浮动清理，例如：

Html代码

<div style=“float:left; width:30%; height:40px;background:#EEE; ”>Some Content</div>

</div>

<div style="background:#666;"> <!-- float container -->
    <div style="float:left; width:30%; height:40px;background:#EEE; ">Some Content</div>
</div>

此时预览此代码，我们会发现最外层的父元素float container,并没有显示。这是因为子元素因进行了浮动，而脱离了文档流，导致父元素的height为零。

若将代码修改为：

Html代码

<div style=“float:left; width:30%; height:40px;background:#EEE; ”>Some Content</div>

</div>

<div style="background:#666;"> <!-- float container -->
    <div style="float:left; width:30%; height:40px;background:#EEE; ">Some Content</div>
    <div style="clear:both"></div>
</div>

注意，多了一段清理浮动的代码。这是一种好的CSS代码习惯，但是这种方法增加了无用的元素。这里有一种更好的方法，将HTML代码修改为：

Html代码

<div style=“float:left; width:30%; height:40px;background:#EEE; ”>Some Content</div>

</div>

<div  style="background:#666;"> <!-- float container -->
    <div style="float:left; width:30%; height:40px;background:#EEE; ">Some Content</div>
</div>

定义CSS类，进行“浮动清理”的控制：

Css代码

.clearfix:after {

content: “.”;

clear: both;

height: 0;

visibility: hidden;

display: block;

} /* 这是对Firefox进行的处理，因为Firefox支持生成元素，而IE所有版本都不支持生成元素 */

.clearfix {

display: inline-block;

} /* 这是对 Mac 上的IE浏览器进行的处理 */

/* Hides from IE-mac \*/

* html .clearfix {height: 1%;} /* 这是对 win 上的IE浏览器进行的处理 */

.clearfix {display: block;} /* 这是对display: inline-block;进行的修改，重置为区块元素*/

/* End hide from IE-mac */

.clearfix:after {
  content: ".";
  clear: both;
  height: 0;
  visibility: hidden;
  display: block;
}            /* 这是对Firefox进行的处理，因为Firefox支持生成元素，而IE所有版本都不支持生成元素 */
.clearfix {
  display: inline-block;
}                /* 这是对 Mac 上的IE浏览器进行的处理 */
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}        /* 这是对 win 上的IE浏览器进行的处理 */
.clearfix {display: block;}        /* 这是对display: inline-block;进行的修改，重置为区块元素*/
/* End hide from IE-mac */

此时，预览以上代码，会发现即使子元素进行了浮动，父元素float container仍然会将其包围，进行高度自适应。

Possibly Related Posts:

Share/Save

+ 注册流程及细节部分优化整合 By 蜗牛 23 六月 2009 at 10:20 上午 138 views and have No Comments

先来看看helicopter的这篇07年的译文
Adaptive Path的一项研究比较了包括博客平台、社交网络、社区及其他四类、共20家2.0公司的注册页面在以下几方面的表现：
　　
　　• Homepage content 主页内容
　　• Initial calls to action 吸引注意力的首元素
　　• Registration flows 注册流程
　　• Error handling 错误处理
　　• Finding and inviting friends 寻找、邀请朋友
　　• New user calls to action 吸引新用户注意力
　　
　　从所得数据中，他们总结出注册页面的若干模式以及提出四条设计指南。内容太多，无法迅速翻译完毕。详见原文,可免费下载。含大量例子，巨有用！
　　
　　http://www.adaptivepath.com/ideas/reports/signup/
　　
　　看下这几条建议：
　　
　　1. Give the user good reasons to join 为用户提供加入的好理由
　　
　　To persuade a new user to sign up for a service, a site should strive to increase perceived value while reducing the investment required to join. The strategies in this section focus on motivating users to join by communicating benefit to the user both explicitly and implicitly.
　　要说服新用户注册，网站应致力于提高可感知价值，同时降低用户加入所需要投入的成本。战略集中于从显性与隐性两方面同时向用户灌输加入的好处，以提供动力。
　　
　　2. Make the sign-up process feel effortless 设计使用户感到轻松的注册过程
　　
　　increasing the cost/benefit ratio by making it painless to join. If signing up feels quick and easy, users will be more inclined to try it out, even if they are unsure how it will benefit them.
　　通过轻松的注册过程，提高成本/效益比例。如果注册过程是便捷快速的，用户会更倾向于尝试各种其他服务，就算他们并不确定到底会得到什么好处。
　　
　　
　　3. Don’t leave new users hanging 不要悬置新用户
　　
　　Guidance of new users should not stop once they’ve registered. Dumping new users on an unfamiliar page with no clear calls to action may leave them baffled as to what they should do next. Instead, reward new users with a welcome message and implicit and explicit guidance as to what they can do next.
　　对新用户提供的指引信息不应在他们注册后就停止。将新用户抛弃在一个不熟悉的页面或缺乏他们下一步该如何行动的指示会使用户感到迷惘。因此应向新用户提供欢迎信息，隐形或显性地指导他们下一步可以做什么。
　　
　　4. Accelerate initial connection-making 加快初始的联系建立过程
　　
　　Building an adequate social network is one of the greatest barriers facing users of a new community. Without friends, community-based services lose much of their value. Thus, helping the user to quickly find and add friends en masse is essential to retaining users.
　　对于新加入某个社区的用户来说，如何建立属于自己的社交网络是最大的障碍。没有好友，基于社区的服务会失却很大价值。因此，帮助用户迅速找到和加朋友是留住用户的关键。

再来看下用户注册细节部分(参考KDUED.COM)
1、简化页面，扫清干扰项
2、注册页面主体宽度小于800像素，利于用户聚焦操作。
3、注册步骤引导使用文字，不要用图片。
4、密码强度提示需提前让用户了解强弱极限度，辅助提示如何设置高强度密码。
5、操作提示语尽量少且简短，并用浅颜色弱化。操作提示语与注册字断垂直排列比平行排列更好。
6、警告语在填写出错后即时触发，不填错不触发。
7、用户已正确填写，给出鼓励提示。
8、验证码简化，全数字或全英文（全大写或全小写），要有即时更换验证码的操作功能。
9、注册提交按钮同时包含同意条款，服务条款重要级别低，可放在按钮下方。
10、注册页面中不设置跳出页面的链接，可用浮层替代。

让我们对照着图示来分析下吧：

1、简化页面，扫清干扰项
用户在注册时，是在进行聚焦操作，我们也不希望在注册完成之前用户被别的元素干扰，导致离开。例如，去掉注册页面的导航及广告等元素，会注册页面更加简洁。

(淘宝注册页顶部)

(Windows Live注册页顶部)

2、注册页面主体宽度小于800像素，利于用户聚焦操作。

先来看下几个用户体验相对较好的网站的注册页面实际宽度统计：

淘宝 width:734px

Yahoo英文站 width:753px

Live width:700px

腾讯 width:750px

从上面这些数据看来，注册页面的总体宽度W < 800px，之所以不统一于网站的其他页面，是考虑到800以内的宽度有利于用户的聚焦操作，如果我们采用用1000左右的宽度，用户在阅读的时候左右扫视内容会产生来回的摇头现象，这并不是我们愿意看到的，因此800以内似乎是目前的理想宽度。

3、注册步骤引导使用文字，不要用图片。

注册步骤引导是图片还是文字？文字下载时间更快

纯文字的淘宝注册步骤引导

使用部分图标的百度注册步骤引导

4、密码强度提示需提前让用户了解强弱极限度，辅助提示如何设置高强度密码。

腾讯的有密码强弱提示供用户参考 (腾讯有密码强弱提示这项供用户参考)

淘宝目前没有提供密码强弱提示这项，但给出了“怎样设置安全性高的密码？”这项，遗憾的是当我单击此链接后跳到了一个新的页面。

(Yahoo英文版的两者结合，且没有新页面的跳转，而是利用巧妙地布局默认有条理的给出安全性建议)

5、操作提示语尽量少且简短，并用浅颜色弱化。操作提示语与注册字断垂直排列比平行排列更好。
提示语多少给用户带来的心理暗示

不预设提示语，感觉规则少，简单

提示语多少给用户带来的心理暗示
预设提示语，感觉应该规则很多，复杂

提示语多少给用户带来的心理暗示
如果实在有必要预设操作提示语，应尽量简化提示语，参考百度

操作提示语的位置摆放

提示语与注册字段平行排放，好处是：减少页面长度；
坏处是：页面文字较多且密集，给用户以“规则很多”的心理暗示，左右同一行宽度增加，与字段对照阅读时需左右摇头。

操作提示语的位置摆放
与注册字段垂直排列的好处是：阅读时不需要左右摇头、方便对照，操作提示语和字段之间有明确的从属关系，不用像左右平行布局要做对应分辨；操作提示语可占据更宽空间，显得更为简洁。
坏处是：可能导致页面过长

操作提示语的呈现方式
腾讯操作提示语的呈现方式

淘宝操作提示语的呈现方式
腾讯和淘宝的注册页面看起来刚好相反，可能淘宝更倾向于密码的安全性吧

Google操作提示语的呈现方式
Google体现的更为明显，注册字段黑体加粗，操作提示部分浅灰体现

大多数网站采用两端向中间靠拢的布局方式，更方便用户聚焦操作

6、警告语在填写出错后即时触发，及未填写时的友好提示。

警告语在填写出错后即时触发，对于简短的表单项还可忍受，如果碰到较长较复杂的页面，用户很难再次尝试。

不同的情况，给出不同的提示语，更贴近用户的感受。

7、用户已正确填写，给出鼓励提示。

8、验证码简化，全数字或全英文（全大写或全小写），要有即时更换验证码的操作功能。

从网站的安全方面考虑，验证码越复杂越安全，从用户体验考虑，验证码越简单越好。

9、注册提交按钮同时包含同意条款，服务条款重要级别低，可放在按钮下方。

蜕变网采用了常见的排列方式，注意此刻注册协议的复选框默认已勾选。

大众点评网将提交按钮和注册协议压缩成了一行排列，最大限度的节约页面长度，尽可能的使整张页面左右两边平衡。

似乎后两者简少了有效内容的长度，腾讯将注册协议放到提交按钮的下方，似乎是不想让注册协议干扰用户，同时有意的加重突出按钮上的确定两个字，似乎一切都那么自然、简单。

10、注册页面中不设置跳出页面的链接，可用浮层替代。

淘宝目前没有提供密码强弱提示这项，但给出了“怎样设置安全性高的密码？”这项，遗憾的是当我单击此链接后跳到了一个新的页面。

看完这10项注册细节问题后似乎还需要补充些，多吸纳一些大家的观点：

对于用户陌生的网站，或是竞争激烈的站点（已经有品牌效应的就不说了）

在蜕变网的注册页右侧草图上我用上图中右边部分替换掉左边的部分，因为保护用户的隐私信息是最基本的事情，在这里我选择将站点的优势体现展示出来，同时加深了用户对网站的理解。

再来看下出侧完成后的引导，是否给用户多个选择呢？

这是采自叽歪网的注册成功页面，它给出了用户多种选择。

不同情况不同需求，在简单的注册完成后，并没有采集到我们想要的信息，给用户一个大体的概念(当然这些看起来不是一般的功能按钮)，
在这个页面我留了一个“开始蜕变”的按钮，点击后会引导用户进行人生GPS、目标进度进行的过程中同时会收集一些注册时没有采集的但对我们来说很重要的信息。9.18的新版蜕变网是否用到这些，目前不能确定，文字部分是自己整凑的，新版会有新的结构树及文字介绍。

Possibly Related Posts:

Share/Save

+ IE6、IE7、Firefox兼容CSS Hack总结 By 蜗牛 15 六月 2009 at 4:19 下午 132 views and have No Comments

IE6，IE7，Firefox兼容的css hack

第一种办法：

body
{
    background:red;
    *background:blue !important;
    *background: green;
}

第一排给Firefox以及其他浏览器看；
第二排给IE7,IE7既能能识别*号，也能识别important；
第三排给IE6也能识别*号；

第二种办法，使用_来区分IE6：

body
{
    background:red;
    *background:blue;
    _background: green;
}

第一排给Firefox以及其他浏览器看；
第二排给IE7,IE7既能能识别*号；
第三排给IE6能识别下划线；

CSS对浏览器器的兼容性具有很高的价值，通常情况下IE和Firefox存在很大的解析差异，这里介绍一下兼容要点。
常见兼容问题：

　　1.DOCTYPE 影响 CSS 处理(但这个声明对于WEB标准的验证是非常重要的)
　　2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
　　3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
　　4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
　　5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式
　　6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
　　7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
　　8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
　　9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：

div{margin:30px!important;margin:28px;}

　　注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：

div{maring:30px;margin:28px}

　　重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;
　　10.IE5 和IE6的BOX解释不一致
　　IE5下

div{width:300px;margin:0 10px 0 10px;}

　　div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改

div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

　　关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）
　　11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义

ul{margin:0;padding:0;}

　　就能解决大部分问题
注意事项：
　　1、float的div一定要闭合。
　　例如：(其中floatA、floatB的属性已经设置为float:left;)

<#div id=”floatA” ></#div>
<#div id=”floatB” ></#div>
<#div id=”NOTfloatC” ></#div>

　　这里的NOTfloatC并不希望继续平移，而是希望往下排。
　　这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。
　　在

<#div class=”floatB”></#div>
<#div class=”NOTfloatC”></#div>

　　之间加上

<#div class=”clear”></#div>

　　这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。
　　并且将clear这种样式定义为为如下即可：

.clear{
clear:both;}

　　此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;
　　当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。
　　例如某一个wrapper如下定义：

.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}

　　2、margin加倍的问题。
　　设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
　　解决方案是在这个div里面加上display:inline;
例如：

<#div id=”imfloat”></#div>

　　相应的css为

#IamFloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/}

　　3、关于容器的包涵关系
　　很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。
　　4、关于高度的问题
　　如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回事）
　　5、最狠的手段 – !important;
　　如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下

.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}

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

Possibly Related Posts:

Share/Save

+ 完美的水平垂直居中！！–兼容ie6，ie7，ff，opera，safari的水平垂直居中 By 蜗牛 02 六月 2009 at 3:31 下午 257 views and have No Comments

Possibly Related Posts:

Share/Save

都市de角落

Archive for ‘ 前端技术 ’

全兼容的纯CSS级联菜单要点浅析 14 九月 2009 at 2:01 下午 by 蜗牛 134 views

+ PNG图片在IE6下面透明显示的一点分享 By 蜗牛 10 九月 2009 at 10:02 上午 159 views and have No Comments

+ 轻松搞定IE的CSS制作网页技巧3则 By 蜗牛 17 八月 2009 at 9:55 上午 127 views and have No Comments

+ CSS浏览器兼容方案 By 蜗牛 30 七月 2009 at 11:40 上午 151 views and have No Comments

+ CSS实现完美垂直居中 By 蜗牛 24 七月 2009 at 3:16 下午 145 views and have No Comments

+ css命名规则 By 蜗牛 17 七月 2009 at 6:40 下午 155 views and have No Comments

一、CSS文件及样式命名

2、CSS样式命名规范

二、id和class的使用及区别

三.使用css缩写

颜色

盒尺寸

边框(border)

背景(Backgrounds)

字体(fonts)

列表(lists)

四、明确定义单位，除非值为0

五、区分大小写

六、取消class和id前的元素限定

七、默认值

九、不需要重复定义可继承的值

十.多重CSS样式定义，属性追加重复最后优先原则

十一、使用子选择器(descendant selectors)

十二、不需要给背景图片路径加引号

十七.导入(Import)和隐藏CSS

十八、CSS hack

十九.调试技巧：层有多大？

二十、CSS代码书写样式

+ CSS:浮动清理，不使用 clear:both标签 By 蜗牛 15 七月 2009 at 10:20 上午 163 views and have No Comments

+ 注册流程及细节部分优化整合 By 蜗牛 23 六月 2009 at 10:20 上午 138 views and have No Comments

+ IE6、IE7、Firefox兼容CSS Hack总结 By 蜗牛 15 六月 2009 at 4:19 下午 132 views and have No Comments

+ 完美的水平垂直居中！！–兼容ie6，ie7，ff，opera，safari的水平垂直居中 By 蜗牛 02 六月 2009 at 3:31 下午 257 views and have No Comments

分类目录

功能

我的图片

Blogroll

Archives

Meta

2010年三月
一	二	三	四	五	六	日
« 十二
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

都市de角落

Archive for ‘ 前端技术 ’

全兼容的纯CSS级联菜单要点浅析 14 九月 2009 at 2:01 下午 by 蜗牛 134 views

+ PNG图片在IE6下面透明显示的一点分享 By 蜗牛 10 九月 2009 at 10:02 上午 159 views and have No Comments

+ 轻松搞定IE的CSS制作网页技巧3则 By 蜗牛 17 八月 2009 at 9:55 上午 127 views and have No Comments

+ CSS浏览器兼容方案 By 蜗牛 30 七月 2009 at 11:40 上午 151 views and have No Comments

+ CSS实现完美垂直居中 By 蜗牛 24 七月 2009 at 3:16 下午 145 views and have No Comments

+ css命名规则 By 蜗牛 17 七月 2009 at 6:40 下午 155 views and have No Comments

一、CSS文件及样式命名

2、CSS样式命名规范

二、id和class的使用及区别

三.使用css缩写

颜色

盒尺寸

边框(border)

背景(Backgrounds)

字体(fonts)

列表(lists)

四、明确定义单位，除非值为0

五、区分大小写

六、取消class和id前的元素限定

七、默认值

九、不需要重复定义可继承的值

十.多重CSS样式定义，属性追加重复最后优先原则

十一、使用子选择器(descendant selectors)

十二、不需要给背景图片路径加引号

十七.导入(Import)和隐藏CSS

十八、CSS hack

十九.调试技巧：层有多大？

二十、CSS代码书写样式

+ CSS:浮动清理，不使用 clear:both标签 By 蜗牛 15 七月 2009 at 10:20 上午 163 views and have No Comments

+ 注册流程及细节部分优化整合 By 蜗牛 23 六月 2009 at 10:20 上午 138 views and have No Comments

+ IE6、IE7、Firefox兼容CSS Hack总结 By 蜗牛 15 六月 2009 at 4:19 下午 132 views and have No Comments

+ 完美的水平垂直居中！！–兼容ie6，ie7，ff，opera，safari的水平垂直居中 By 蜗牛 02 六月 2009 at 3:31 下午 257 views and have No Comments

分类目录

功能

角落亮点

我的图片

Blogroll

Archives

Meta