Edward's Blog » Web前端 http://edwardpku.com/blog Sun, 01 May 2011 16:57:07 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 获得Google HTML5 Salon第三名 http://edwardpku.com/blog/2010/11/%e8%8e%b7%e5%be%97google-html5-salon%e7%ac%ac%e4%b8%89%e5%90%8d/ http://edwardpku.com/blog/2010/11/%e8%8e%b7%e5%be%97google-html5-salon%e7%ac%ac%e4%b8%89%e5%90%8d/#comments Sat, 27 Nov 2010 14:04:30 +0000 Edward http://edwardpku.com/blog/2010/11/%e8%8e%b7%e5%be%97google-html5-salon%e7%ac%ac%e4%b8%89%e5%90%8d/ 今天有参加Google HTML5 Salon，三个小时奋战，单枪匹马获得了第三名。最后作品的评比是所有开发者投票决定的，然后结果就是。。。 每个人投向了自己制作的应用上。。。 还好，我和几个和我一样都是一个人过来参加活动的同学们聊得很不错，最终获得了4票。获得了评比的第三名。

我做的应用是基于Canvas技术的Avatar，随着HTML5技术的普及，虚拟物品将会更多的使用Canvas来进行实现。用户可以在不同的平台上（PC,Apple,other mobile device）上展示并更新自己的虚拟形象。

以下是截图以及作品地址：http://edawrdpku.com/avatar/

]]> http://edwardpku.com/blog/2010/11/%e8%8e%b7%e5%be%97google-html5-salon%e7%ac%ac%e4%b8%89%e5%90%8d/feed/ 3 Book Review 用户体验的要素 http://edwardpku.com/blog/2010/03/book-review-%e7%94%a8%e6%88%b7%e4%bd%93%e9%aa%8c%e7%9a%84%e8%a6%81%e7%b4%a0/ http://edwardpku.com/blog/2010/03/book-review-%e7%94%a8%e6%88%b7%e4%bd%93%e9%aa%8c%e7%9a%84%e8%a6%81%e7%b4%a0/#comments Sat, 20 Mar 2010 02:13:44 +0000 Edward http://edwardpku.com/blog/2010/03/book-review-%e7%94%a8%e6%88%b7%e4%bd%93%e9%aa%8c%e7%9a%84%e8%a6%81%e7%b4%a0/ 本书以一个流程的方式来阐述如何建设一个有用的，能够实现预期目标的网站。这和我预期的关注交互设计的不同。可以说，比我想象中的深刻。

战略：

战略层，即要设定一个目标，并建立网站满足目标。在这个过程中，我们可以对用户进行分群，使用品牌识别，用户研究（如进行问卷和访谈）。并为战略层设置一个目标，如对于一个需要大量时间沉溺的网站，如社区，访问的时间增长提高可以设置成目标。对于一个需要快速获得他们需要的信息的网站，可以考察用户对于关键词的翻页情况。为此，开发团队要设置vistion document，来回答 我们为谁做网站？他们分几类？他们有什么特点？怎么样算是完成了目标？

范围：

为了达到战略目标，我们需要确定我们需要什么功能来满足这些需求。在这个阶段可以制定功能需求文档。并未需求分优先级，这尤其重要。由于资源总是有限的，可能无法一时实现所有的功能，可以放在下一版本的开发规划中。同时需要对内容需求进行获取，即我们会显示什么内容，内容的规格是多大，长度？更新频率。对于视频，音频，他们的长度和大小？在制定功能文档的时候，使用主动积极的描述方式至关重要。如用户无法点某个按钮，可以描述为设置为暗色，或上锁样式，如果点击会弹出提示框。

结构：

结构层可以分为交互设计和信息架构。交互设计，去分析你的用户会怎么使用网站？因此你提供的功能改如何呈现？你改如何处理用户的错误输入（设置成无法实现的，或导向他们需要的功能或信息）？也可以模拟他们在显示生活中的交互方式放在web页面上。对于信息架构，主要值得是如何对内容进行分类和定义。将每一篇文章认为是一个节点，可以有以下组织方式：层级结构,矩阵（多维），自然结构，线性结构。团队中可以通过画流程图和交互图（use case）之类的来对结构的组织方式进行建模。

框架：

框架层关注结构侧提供的每一个功能的细小细节：包括界面设计，导航设计以及信息设计。通常设计的时候要遵循一定的规范或习惯，除非有很充足的理由打破这种规范和习惯。为此我们经常需要“线框图”wireframe来完成这部分工作。而对于较为复杂的网站则需要多个线框图。线框图关注不同类型的导航的位置：全局导航，局部导航，辅助导航，上下文导航，以及站外导航，站点地图和索引表。这些线框的大小也受内容类型及大小的印象。

表现：

表现层是关注视觉的。对比的设计用来突出需要突出的内容，一致性的设计也是为了强调需要强调的内容和主题。为此，工作人员需要遵循一个原则和视觉规范。在工作之初制定这样的视觉规范是至关重要的。这个阶段产生的结果是原型(prototype)。

这些层面在项目的不同阶段需要着重考虑，但是可以在下一个阶段还需要变更上一个阶段的需求。也就是说他们并不是独立的，有时候会杂糅在一起。好的最佳实践往往是上一个阶段的工作在下一个阶段完成之前完。但这也意味着有时候所有决定会在最后一刻做出。这是一个煎熬的过程。我深有体会。但这种情况下往往是一个失败的项目，需求一变再变，工期越推越久。

总的来说，对于一本160页的书来说。它所包含的内容超过了我的预期。虽然我的预期这是一本关注设计细节的书。但开始看了才发现作者贯穿了网站开发的整个过程。在一个轻型团队中，从设计师，架构师，程序员，我认为有必要让每个人了解为什么要重视用户体验的设计，并在工作中加以考虑。怎么做能够让用户最舒服，最让用户感觉到这个网站的开发者在关注他们内心需求，为他们着想。

]]> http://edwardpku.com/blog/2010/03/book-review-%e7%94%a8%e6%88%b7%e4%bd%93%e9%aa%8c%e7%9a%84%e8%a6%81%e7%b4%a0/feed/ 0 原来我没在互联网圈子里呆过 http://edwardpku.com/blog/2009/11/%e5%8e%9f%e6%9d%a5%e6%88%91%e6%b2%a1%e5%9c%a8%e4%ba%92%e8%81%94%e7%bd%91%e5%9c%88%e5%ad%90%e9%87%8c%e5%91%86%e8%bf%87/ http://edwardpku.com/blog/2009/11/%e5%8e%9f%e6%9d%a5%e6%88%91%e6%b2%a1%e5%9c%a8%e4%ba%92%e8%81%94%e7%bd%91%e5%9c%88%e5%ad%90%e9%87%8c%e5%91%86%e8%bf%87/#comments Sat, 28 Nov 2009 09:28:33 +0000 Edward http://edwardpku.com/blog/2009/11/%e5%8e%9f%e6%9d%a5%e6%88%91%e6%b2%a1%e5%9c%a8%e4%ba%92%e8%81%94%e7%bd%91%e5%9c%88%e5%ad%90%e9%87%8c%e5%91%86%e8%bf%87/ 我们在有所突破的时候，总会讲，原来***。此时此刻，我真正感觉到互联网了。你有一堆用户要处理，好的，坏的，客气的，恶语相向的。我想恶语相向的用户对我们来说是好的，促使我们不断努力提高自己的产品，同时，我相信对方对我们是有所期待的。

记得进公司第一天，大象给我了任务，我说，两周吧？ 大象说，这么久？一周怎么样，上了再说。到时候虽然会有玩家骂你，但是你不是孤独的改善的你服务。 “好吧，听你的，一周。”接下来是让人无法相信的一周，我和我的同事们共同达到了这一目标。我们改善了游戏的界面，提高了用户体验。并上线内测，一周之后，我们开始推广了。第一天就带来了将近一万的用户。用户的对战算法，一些bug等等。我们一周做了我认为需要两周才能做到的工作。下个月，这款游戏还会在巴西上线，获得了当地游戏企业的支持，我们希望将我们的游戏做成Orkut上最成功的游戏，当然，这需要我和我的同事继续投入热情和汗水。这是我第一次感觉到互联网的速度。以前Sun没有过，IBM更没有给我过这种感觉。什么都像风一样快速。

我的同事们也很可爱，饼哥是一个很有个性的PHP程序员，PHP语法熟悉的一塌糊涂。但是有时会出言不逊，小星是一个毕业不久的小孩，最近在追女生，所以工作上我给他一点空间。兴兴是一个不错的美术工作者，相当踏实。但是，他每次过好了，不是立刻发给我，而是要等我去找他。所以，准确的说，我的团队有4个人。哦，对了，还有小旭负责我们的产品的运维，回答玩家的问题等等。5个人，能造就一款伟大的产品吗？我想我可以。

接下来谈一谈我的经验对我现在的工作的帮助吧。一，跨国项目经验。我为外海的客户提供过服务，这使得我在接手现在这个在巴西的项目的时候，还是轻车熟路的。 二，JS经验。前台我一个人搞定，感谢Leon以及在IBM的同事对我栽培，到现在而言，我挺喜欢编写JS代码的。三，产品经验。我喜欢玩游戏，这对一家游戏企业来说尤其重要。我理解我在做的产品。

意识流了，我似乎还没解释我的标题。经历了这些事情，我深刻感觉到，以前我做的企业服务，而现在，我真正的可以说我是互联网圈子的人了。我掌握着互联网技术，以及互联网理念以及产品。这种感觉不错。

]]> http://edwardpku.com/blog/2009/11/%e5%8e%9f%e6%9d%a5%e6%88%91%e6%b2%a1%e5%9c%a8%e4%ba%92%e8%81%94%e7%bd%91%e5%9c%88%e5%ad%90%e9%87%8c%e5%91%86%e8%bf%87/feed/ 2 Vote for Drupal!!! http://edwardpku.com/blog/2009/04/vote-for-drupal/ http://edwardpku.com/blog/2009/04/vote-for-drupal/#comments Thu, 09 Apr 2009 02:41:18 +0000 Edward http://ed.4message.net/?p=489 webware100-09_vote_l

Every year, CNet goes to the people and asks what the best Web 2.0 applications and services are. The people have spoken, and Drupal has been nominated, along with 299 others. To put Drupal into the coveted top 100, we need you to vote. Voting continues until April 30, so don’t wait, vote now.

Drupal won in 2007, and again in 2008. Can Drupal win in 2009? We sure hope so, but it will take your help. Please take a few seconds of your time to vote and help make Drupal a Webware 100 winner in 2009. Drupal is in the Social Networking & Publishing category.

In addition to voting you can put this fine graphic in your own blog posts encouraging others to vote for Drupal as well. Please link to either of the following:

Thank you!

]]> http://edwardpku.com/blog/2009/04/vote-for-drupal/feed/ 0 再提多态 http://edwardpku.com/blog/2009/03/%e5%86%8d%e6%8f%90%e5%a4%9a%e6%80%81/ http://edwardpku.com/blog/2009/03/%e5%86%8d%e6%8f%90%e5%a4%9a%e6%80%81/#comments Mon, 30 Mar 2009 07:04:23 +0000 Edward http://ed.4message.net/?p=480 记得进入Sun的面试的时候Leon就问了我Java如何实现多态。当时的答案是通过重载和继承，后者也就是动态绑定。今天看到PHP与MySQL5程序设计里面的关于PHP不支持方法重载的时候，再次引起我对“多态”这个概念的探究。首先，多态是面向对象方面的一个重要特性，它本不应该依赖于特定的编程语言。WIKI 中对Polymorphism的定义如下：
In simple terms, polymorphism is the ability of one type, A, to appear as and be used like another type, B. In strongly typed languages, this usually means that type A somehow derives from type B, or type A implements an interface that represents type B.
Operator Overloading the numerical operators +, -, /, * allow polymorphic treatment of the various numerical types integer, unsigned integer, float, decimal, etc; each of which have different ranges, bit patterns, and representations. Another common example is the use of the “+” operator which allows similar or polymorphic treatment of numbers (addition), strings (concatenation), and lists (attachment). This is a lesser used feature of polymorphism.
The primary usage of polymorphism in industry (object-oriented programming theory) is the ability of objects belonging to different types to respond to method, field, or property calls of the same name, each one according to an appropriate type-specific behavior. The programmer (and the program) does not have to know the exact type of the object in advance, and so the exact behavior is determined at run time (this is called late binding or dynamic binding).
从中我们可以看到，其实重载(override)并不是polymorphism，只是利于国人理解的一种解释。网上好多类似的讨论，一时也把我搞糊涂了，我特意去查了一下Thinking in Java，证实了以上的说法。总结一下就是继承是多态的基础，多态使得不同对象对同一条指令做出各自不同的响应。所以我当初的答案是不准确的，但是动态多态和静态多态的概念在C＋＋教学中普遍使用，使得在在中文中多态又多了一层含义。

而PHP不支持方法重载的很大原因也在于PHP是弱类型语言，类型本身就可以自动变更，方法重载也就省了。

]]> http://edwardpku.com/blog/2009/03/%e5%86%8d%e6%8f%90%e5%a4%9a%e6%80%81/feed/ 0 Andy Clarke的CSS命名建议 http://edwardpku.com/blog/2009/03/andy-clarke%e7%9a%84css%e5%91%bd%e5%90%8d%e5%bb%ba%e8%ae%ae/ http://edwardpku.com/blog/2009/03/andy-clarke%e7%9a%84css%e5%91%bd%e5%90%8d%e5%bb%ba%e8%ae%ae/#comments Mon, 23 Mar 2009 06:42:34 +0000 Edward http://ed.4message.net/?p=475

如下：

#container

Page container (usually a <div>)

#branding
Used for a header or banner to brand the site.
#branding-logo
Used for a site logo
#branding-tagline
Used for a strapline or tagline to define the site’s purpose
#nav or #navigation
Used to contain a navigation device
#nav-main
Main or primary navigation
#nav-section
Navigation to pages within the current site section
#nav-external
Navigation to pages outside the site
#nav-supplementary or #nav-supp
A supplementary list of links, perhaps in a footer. This can replace the common, but presentational #footer
#nav-(whatever)
A list of links named at a designer’s descretion
#search
Related to search interface and search results
#search-input
A search form
#search-output
Search results which could include a <div> or other markup including definition lists
#content
Used for content rather than for another purpose such as navigation
#content-main
The main content area
#content-news
News related content
#content-(whatever)
Could include any form of content, including #content-related, #content-quote etc.
#siteinfo
Used for various site related information
#siteinfo-legal
Copyright information etc.
#siteinfo-credits
Designer or other credits
E-commerce related
#content-products
An overall area containing products
.products
Referring to individual products
.products-prices
Prices, discounts, special offers etc.
.products-description
A summary or longer description of a product
.products-review
A customer review
.products-(whatever)
Could include any form of product related content
原文连接：

http://www.stuffandnonsense.co.uk/archives/whats_in_a_name_pt2.html

]]> http://edwardpku.com/blog/2009/03/andy-clarke%e7%9a%84css%e5%91%bd%e5%90%8d%e5%bb%ba%e8%ae%ae/feed/ 0 查看网站在不同操作系统和浏览器下的显示 http://edwardpku.com/blog/2009/03/%e6%9f%a5%e7%9c%8b%e7%bd%91%e7%ab%99%e5%9c%a8%e4%b8%8d%e5%90%8c%e6%93%8d%e4%bd%9c%e7%b3%bb%e7%bb%9f%e5%92%8c%e6%b5%8f%e8%a7%88%e5%99%a8%e4%b8%8b%e7%9a%84%e6%98%be%e7%a4%ba/ http://edwardpku.com/blog/2009/03/%e6%9f%a5%e7%9c%8b%e7%bd%91%e7%ab%99%e5%9c%a8%e4%b8%8d%e5%90%8c%e6%93%8d%e4%bd%9c%e7%b3%bb%e7%bb%9f%e5%92%8c%e6%b5%8f%e8%a7%88%e5%99%a8%e4%b8%8b%e7%9a%84%e6%98%be%e7%a4%ba/#comments Mon, 23 Mar 2009 06:21:58 +0000 Edward http://ed.4message.net/?p=474 访问http://browsershots.org/ ，输入你要看的网站的网址，一段时间时候以后就会将您提供的网站的在特定操作系统和浏览器下的截图显示出来:

未命名图片

但是要注意的一点是该网站每天提供的服务数是有限的，同时需要一些时间的等待。

]]> http://edwardpku.com/blog/2009/03/%e6%9f%a5%e7%9c%8b%e7%bd%91%e7%ab%99%e5%9c%a8%e4%b8%8d%e5%90%8c%e6%93%8d%e4%bd%9c%e7%b3%bb%e7%bb%9f%e5%92%8c%e6%b5%8f%e8%a7%88%e5%99%a8%e4%b8%8b%e7%9a%84%e6%98%be%e7%a4%ba/feed/ 1 Ubuntu下安装常用软件 http://edwardpku.com/blog/2008/12/ubuntu%e4%b8%8b%e5%ae%89%e8%a3%85scite/ http://edwardpku.com/blog/2008/12/ubuntu%e4%b8%8b%e5%ae%89%e8%a3%85scite/#comments Mon, 01 Dec 2008 08:57:30 +0000 Edward http://ed.4message.net/?p=442 Scite:

sudo apt-get install scite

vnc:

sudo apt-get install vncviewer

]]> http://edwardpku.com/blog/2008/12/ubuntu%e4%b8%8b%e5%ae%89%e8%a3%85scite/feed/ 0 NetBeans6.5 下载地址 http://edwardpku.com/blog/2008/11/netbeans65-%e4%b8%8b%e8%bd%bd%e5%9c%b0%e5%9d%80/ http://edwardpku.com/blog/2008/11/netbeans65-%e4%b8%8b%e8%bd%bd%e5%9c%b0%e5%9d%80/#comments Tue, 25 Nov 2008 07:42:43 +0000 Edward http://ed.4message.net/?p=440

NetBeans IDE 6.5 完全支持所有 Java 平台（Java SE、Java EE、Java ME 和 JavaFX），此外还是 PHP、Ajax 和 JavaScript、Groovy 和 Grails、Ruby 和 Ruby on Rails 以及 C/C++ 软件开发的理想工具。6.5 发行版增强了对 Web 框架 (Hibernate, Spring, JSF, JPA)、GlassFish v3 应用服务器以及数据库的支持。此外，它还包括新增的在 IDE 范围内快速搜索的快捷键、更加友好的用户界面以及自动在保存时编译功能。

]]> http://edwardpku.com/blog/2008/11/netbeans65-%e4%b8%8b%e8%bd%bd%e5%9c%b0%e5%9d%80/feed/ 0 如何测试网页在不同的浏览器下的显示 http://edwardpku.com/blog/2008/10/%e5%a6%82%e4%bd%95%e6%b5%8b%e8%af%95%e7%bd%91%e9%a1%b5%e5%9c%a8%e4%b8%8d%e5%90%8c%e7%9a%84%e6%b5%8f%e8%a7%88%e5%99%a8%e4%b8%8b%e7%9a%84%e6%98%be%e7%a4%ba/ http://edwardpku.com/blog/2008/10/%e5%a6%82%e4%bd%95%e6%b5%8b%e8%af%95%e7%bd%91%e9%a1%b5%e5%9c%a8%e4%b8%8d%e5%90%8c%e7%9a%84%e6%b5%8f%e8%a7%88%e5%99%a8%e4%b8%8b%e7%9a%84%e6%98%be%e7%a4%ba/#comments Wed, 22 Oct 2008 02:52:48 +0000 Edward http://ed.4message.net/?p=400 任何做WEB程序的都知道，写一个WEB程序都会面对浏览器不同的问题，所以就需要在不同的浏览器下进行测试，那么如何安装多个版本的IE呢？有很多方法，例如安装虚拟机之类的，其实有一个方法最简单：下载Multiple IE.

它可以帮你安装从IE3.0到6.0的所有主流IE版本。

下载地址

]]> http://edwardpku.com/blog/2008/10/%e5%a6%82%e4%bd%95%e6%b5%8b%e8%af%95%e7%bd%91%e9%a1%b5%e5%9c%a8%e4%b8%8d%e5%90%8c%e7%9a%84%e6%b5%8f%e8%a7%88%e5%99%a8%e4%b8%8b%e7%9a%84%e6%98%be%e7%a4%ba/feed/ 4 如何兼容Firefox和IE http://edwardpku.com/blog/2008/07/%e5%a6%82%e4%bd%95%e5%85%bc%e5%ae%b9firefox%e5%92%8cie/ http://edwardpku.com/blog/2008/07/%e5%a6%82%e4%bd%95%e5%85%bc%e5%ae%b9firefox%e5%92%8cie/#comments Fri, 25 Jul 2008 02:52:14 +0000 Edward http://ed.4message.net/?p=280 关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助.
一、CSS HACK

以下两种方法几乎能解决现今所有HACK.

1, !important

随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)

2, 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加上 class=”clearfix” 即可,屡试不爽.

三、其他兼容技巧

1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
2, 居中问题.
1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)
3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)
4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.
5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.

1 针对firefox ie6 ie7的css样式
现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，
但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针
对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。
现在写一个CSS可以这样：

#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。

2 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; 就可以了。

3 盒模型不同解释

#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-}

4 浮动ie产生的双倍距离

#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);

#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，
正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

6 页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，
而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个

放到 标签下，然后为div指定一个类：
然后CSS这样设计：
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? “600px”: “auto” );}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

7 清除浮动

.hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;}
或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，
所 以并不影响到IE/WIN浏览器。这种的最麻烦的……#box:after{ content: “.”; display: block; height: 0; clear: both; visibility: hidden;}

8 DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}
HTML代码

9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)

p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

10 IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。

11 高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用
margin 或paddign 时。
例：

p对象中的内容

CSS：#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。
六、CSS兼容要点分析IE vs FF

CSS 兼容要点：

DOCTYPE 影响 CSS 处理

FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中

FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width

FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式

div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格XHTML+CSS兼容性解决方案小集

使用XHTML＋CSS构架好处不少，但也确实存在一些问题，不论是因为使用不熟练还是思路不清晰，我就先把一些我遇到的问题写在下面，省的大家四处找^^

1、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：

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

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

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

重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

2、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不支持，如果有人理解的话，请告诉我一声，谢了！：）

3、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义

ul{margin:0;padding:0;}

就能解决大部分问题

4、关于脚本，在xhtml1.1中不支持language属性，只需要把代码改为

< type=”text/java”>
就可以了
七、10个你未必知道的CSS技巧

1、CSS字体属性简写规则

一般用CSS设定字体属性是这样做的：

font-weight:bold;

font-style:italic;

font-varient:small-caps;

font-size:1em;

line-height:1.5em;

font-family:verdana,sans-serif;

但也可以把它们全部写到一行上去：

font: bold italic small-caps 1em/1.5em verdana,sans-serif;

真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。

2、同时使用两个类

一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：

…

同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。

补充：对于一个ID，不能这样写

…

也不能这样写

3、CSS border的缺省值

通常可以设定边界的颜色，宽度和风格，如：

border: 3px solid #000

这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。

如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。

4、CSS用于文档打印

许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。

也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：

第1行就是显示，第2行是打印，注意其中的media属性。

但应该在打印 CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。

5、图片替换技巧

一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。

比如你想整个卖东西的图标，你就用了这个图片：

Buy widgets

这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：

Buy widgets

但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：

h1 { background: url(/blog/widget-image.gif) no-repeat; height: image height text-indent: -2000px }
注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。

6、CSS box模型的另一种调整技巧

这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：

#box { width: 100px; border: 5px; padding: 20px }

这样调用它：

…

这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。

但用CSS也可以达到同样的目的，让它们显示效果一致。

#box { width: 150px } #box div { border: 5px; padding: 20px }

这样调用：

…

这样，不管什么浏览器，宽度都是150点了。

7、块元素居中对齐

如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样：

#content { width: 700px; margin: 0 auto }

你会使用

来围上所有元素。这很简单，但不够好，IE6之前版本会显示不出这种效果。改CSS如下：

body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }

这会把网页内容都居中，所以在Content中又加入了

text-align: left 。

8、用CSS来处理垂直对齐

垂直对齐用表格可以很方便地实现，设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。

CSS方法是什么呢？对了，把这些文字的行高设为 2em：line-height: 2em ，这就可以了。

9、CSS在容器内定位

CSS的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器：

#container { position: relative }

这样容器内所有的元素都会相对定位，可以这样用：

如果想定位到距左30点，距上5点，可以这样：

#navigation { position: absolute; left: 30px; top: 5px }

当然，你还可以这样：

margin: 5px 0 0 30px

注意4个数字的顺序是：上、右、下、左。当然，有时候定位的方法而不是边距的方法更好些。

10、直通到屏幕底部的背景色

在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部，用表格是很方便的，但如果只用这样的CSS：

#navigation { background: blue; width: 150px }

较短的导航条是不会直通到底部的，半路内容结束时它就结束了。该怎么办呢？

不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的颜色和设定的背景色一样。

body { background: url(/blog/blue-image.gif) 0 0 repeat-y }
此时不能用em做单位，因为那样的话，一旦读者改变了字体大小，这个花招就会露馅，只能使用px。

]]> http://edwardpku.com/blog/2008/07/%e5%a6%82%e4%bd%95%e5%85%bc%e5%ae%b9firefox%e5%92%8cie/feed/ 0