刘钢的博客 - 我是UED » Web标准 http://www.iamued.com http://www.IamUED.com Wed, 18 Jan 2012 02:51:35 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 再谈float菜单局中 http://www.iamued.com/qianduan/825.html http://www.iamued.com/qianduan/825.html#comments Mon, 21 Dec 2009 05:18:10 +0000 RichieLiu http://www.iamued.com/?p=825 昨天用ucweb看到了goos发的一篇帖子：谁说Float菜单不可以水平居中，进去看了看，觉得方法有点繁琐了，用到了负边距，position:relativel; 和很少的一点hack。

我这里还有更简单的办法，先展示：
其实我外面应该再套一个div，但为了减少碳排放，舍弃。
DEMO1 DEMO2

<!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" />
<style type="text/css">
body{font-family:Verdana,Arial,sans-serif;font-size:12px;margin:120px auto;text-align:center;}
ul{margin:0;padding:0;list-style:none;}
#navigation{display:inline-block;border:solid 1px red;padding:20px;}
 #navigation li{height:30px;float:left;}
  #navigation li a{float:left;height:30px;line-height:30px;padding:0 23px;background:#97C099;}
  #navigation li a:hover{background:#59c099;color:#fff;}
</style>
<!--[if lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif]-->
<title>float菜单局中一法</title>
</head>
<body>
<ul id="navigation">
 <li><a href="#">Home</a></li>
 <li><a href="#">News</a></li>
 <li><a href="#">Store</a></li>
 <li><a href="#">Group</a></li>
 <li><a href="#">Community</a></li>
 <li><a href="#">Help</a></li>
</ul>
</body>
</html>

其中最为关键的是这一句： 

<!--[if lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif]-->

为了照顾较低版本IE，这里使用了条件注释，感觉在IE7以下中，display:inline;的作用就相当于inline-block;。   根据上面代码进化而来的滑动门导航：DEMO演示 

<!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" />
<style type="text/css">
body{font-family:Verdana,Arial,sans-serif;font-size:12px;margin:120px auto;text-align:center;}
ul{margin:0;padding:0;list-style:none;}
#navigation{display:inline-block;padding:20px;border:solid 1px red;}
 #navigation li{height:30px;float:left;}
  #navigation li a{float:left;background:#97C099 url(http://home.blueidea.com/attachment/200903/13/381636_1236958262fsCk.gif) left top no-repeat;padding-left:27px;height:30px;overflow:hidden;}
  #navigation li a span{height:30px;float:left;background:url(http://home.blueidea.com/attachment/200903/13/381636_1236958262fsCk.gif) right -352px no-repeat;padding-right:27px;line-height:33px;cursor:hand;}
  #navigation li a:hover,#navigation li.current a{background-position:left -176px;color:#009;background-color:#8597B5;}
  #navigation li a:hover span,#navigation li.current a span{background-position:right -528px;}
  #navigation li.current a{font-weight:bold;}
</style>
<!--[if lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif]-->
<title>根据上面代码升级为滑动门样式</title>
</head>
<body>
<ul id="navigation">
 <li><a href="#"><span>Home</span></a></li>
 <li><a href="#"><span>News</span></a></li>
 <li class="current"><a href="#"><span>Store</span></a></li>
 <li><a href="#"><span>Group</span></a></li>
 <li><a href="#"><span>Community</span></a></li>
 <li><a href="#"><span>Help</span></a></li>
</ul>
</body>
</html>

其中，这两句有必要说明一下，以免被认为是多余的：  

#navigation li a{overflow:hidden;} /* 隐藏掉IE5.5、6多掉的那3px，不是3px bug哈！因为height:30px;line-height:33px; 在IE5.5、6中高度就是33px了。 */ #navigation li a span{cursor:hand;}/* 照顾IE 5.5、6、7鼠标放在span上面不呈手型的bug。此外，IE5.5不支持cursor:pointer;但IE全版本都认识cursor:hand;*/

完工了，缺点就是，写那一行条件注释，对于有xhtml洁癖的人来说，就像眼里的沙子，想除掉，那就使用hack也无妨！呵呵！ 在safari4，chorme，opera10，ie5.5、5、6、7,ff3中均暂未发现问题。 原文：http://www.blueidea.com/tech/web/2009/7281.asp ]]> http://www.iamued.com/qianduan/825.html/feed 0 border:none;与border:0;的区别 http://www.iamued.com/qianduan/619.html http://www.iamued.com/qianduan/619.html#comments Thu, 26 Nov 2009 08:55:49 +0000 RichieLiu http://www.iamued.com/?p=619 这问题在网络相信已经有不少人问到，最近再次被牵起讨论，籍此记录一下个人的理解，border:none;与border:0;的区别体现有两点：一是理论上的性能差异二是浏览器兼容性的差异。

性能差异：

【border:0;】把border设为“0”像素虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。

【border:none;】把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。

兼容性差异：

兼容性差异只针对浏览器IE6、IE7与标签button、input而言，在win、win7、vista 的XP主题下均会出现此情况。

【border:none;】当border为“none”时似乎对IE6/7无效边框依然存在，如下例Demo1：

【border:0;】当border为“0”时，感觉比“none”更有效，所有浏览器都一致把边框隐藏，如下例Demo2：

总结：

对比border:0;与border:none;之间的区别在于有渲染和没渲染，感觉他们和display:none;与visibility:hidden;的关系类似，而对于border属性的渲染性能对比暂时没找测试的方法，虽然认为他们存在渲染性能上的差异但也只能说是理论上。

如何让border:none;实现全兼容？只需要在同一选择符上添加背景属性即可，如下例Demo3：

对于border:0;与border:none;个人更向于使用,border:none;，因为border:none;毕竟在性能消耗没有争议，而且兼容性可用背景属性解决不足以成为障碍。

原文：http://blog.gulu77.com/?p=614

]]> http://www.iamued.com/qianduan/619.html/feed 1 转：评论jQuery是魔鬼还是天使？ http://www.iamued.com/qianduan/545.html http://www.iamued.com/qianduan/545.html#comments Wed, 18 Nov 2009 00:58:37 +0000 RichieLiu http://www.iamued.com/?p=545 近来jQuery的发展简直是风光无限，各方赞誉之声是此起彼伏，先是放出了微软、 nokia的重磅利好消息，然后是使用了jQuery的各大知名网站名单，现在又开始在css框架领域建立起了她的新帝国。相比一起诞生的其它js框架已 经是不可同日而语了，非常敬佩jQuery团队的运营能力，将一件事从无到有，从有到卓越，从出书到孜孜不倦的发表技术文章，一切都演变得那么自然，仿佛 是一本营销学的教科书。

　　jQuery倡导的简单、快速编写js的方式，彻底改变了那传统琐碎的js编写方式，不再需要担心浏览器的兼容性，无论是简单还是绚烂的功能，也不再需要编写一堆冗赘的代码。她像一个天使让js焕然一新充满了活力……..

　　她对js的贡献让我想起了Dreamweaver对互联网发展的贡献，回望历史，在那 web标准方兴未艾、浏览器战火纷飞的年代，Dreamweaver用她兼容一切的table布局方案和视图化的编码方式，让web的制作的门槛视乎降低 到了不可思议的低，让web制作立马走进了千家万户，Dreamweaver的出现让web在量上的发展有了长足的进步，他为互联网的发展起到了不可小视 的历史推动，但在web标准的发展史上，因为Dreamweaver的无所不能、开发简快，渐渐的让HTML标准消失在了人们的视野中，将一代人带上了歧 途，惊醒过来的人们终于又意识到了web标准的存在（在这儿要感谢那些坚持不懈的各种浏览器的生产商）。有了一小群人开始鄙视那个多年不更新的IE6，开 始鄙视那些“Dreamweaver网页工程师”。

　　就像只会用Dreamweaver做页子的人一样，很多都不知道[DIV]与 [SPAN]之间的关系和区别，而只用jQuery写js的人会不会不知道 getElementById()和getElementsByName()之间的关系呢，jQuery巧妙的代码将兼容性问题很好的掩盖，无所不能的特 效、简快的开发方式，正开始让js标准渐渐淡出人们的视野。一切都太像了，有些不可思议，历史的轮回好像真的存在，我不知道jQuery会不会将一些人带 上歧途，但真的希望这一切不要真的发生。

做项目开发和做研究是两个概念，绝大部分的技术人员目的是为了开发，开发的目的是为了解决用户的需求，所以开发人员的根本是快速高质量的完成项目，这个是根本，不是带上歧途，是开发人员对复杂的js要透明（个人见解）。

　　这是一个痛苦的矛盾：“处理兼容性的代码只会让兼容性问题越来越严重”。css的处境也不太妙，不知哪位高人曾经说过：“csshack的滥用只会让css离标准越来越远”。

　　很多时候事情就是这么的无奈，你想的往往和你做的正好相反，你想兼容所有终端，但用户几 乎只用IE；你想模块化、想整体架构、想掌握技术核心，但你的工作得以效率为中心来开展；你想把事儿做到最完美，但那样做出来的好像并不值钱；好的想法为 什么总是得不到现实的支持呢，反过来想想答案就出来了，现有的需求不需要也不能支持那样的生产力呗。

　　回到一个让很多web标准坚持者黯然尴尬的问题：“web标准有什么好处？”。对于js 来说，这个问题要好点，因为DOM的标准已经成功进驻了各大语种的基库里，如果你会用js dom写应用的话，那你就可以在.net php java ……很多语言里游刃有余的使用DOM了，如果你还能玩转ECMAScript的话，恭喜你，你可以轻松转型到ECMAScript系的其他语言， 比如Actionscript…….. 坚持js的web标准还有另外一个好处，就是jQuery能做的js一定能做，而jQuery做不到的，js也许也能做，要知道jQuery就是js做 的…..

技术标准不只是 技术实现这样简单，很多时候是商业操作的结果，比如ie并不是兼容w3c，但是他是隐形的标准，而且标准在不同时间段内是不一样的，如果还有另外一家公司 做的比微软还好，使用率还高，那隐形标准也许又不是w3c和ie了，所以标准是有时间和空间的限制，技术在发展，商业变换是技术无法预测的，应该审时度 势，做符合大众的，不要一味的追求所谓的标准。

好吧，jQuery她的简单、快速开发是符合技术需求的，使用js + jQuery的方式开发项目会让人感到实用和愉快。但在接纳和使用她的时候，一定不能忘记web标准，不然会走很长很长的弯路………

邓爷爷说过：不管白猫黑猫，能抓住老鼠就是好猫，框架诞生的目的是为了降低开发的难度，提高开发的速度和质量，框架本无错，错就是错在作者在误导读者。有了汽车就不走路了吗？

]]> http://www.iamued.com/qianduan/545.html/feed 0