Monthly Archives: 六月 2006

PureCSS.cn网页代码收集

解决IE5/IE5.5/IE6/FF的兼容性问题——CSS
作者:purecss 日期:2006-06-12

之前找了几个不同版本的可独立运行的IE浏览器,正好拿来试试页面的兼容性问题。不试不知道,在IE6和FF中没问题的页面在IE5和IE5.5中乱成一团,一直听说IE5是WEB标准制作的一个“钉子户”,现在不得不相信了。

既然有问题,那就找找解决的方法咯,在网上一搜,相关的文章还是不少的,觉得最直接的方法还是“IE条件注释”,很方便的就能为IE的不同版本写样式。但这样就得为每个版本写一个样式,不利于文件的优化。

找了一些相关的CSS HACK后,觉得应该可以把IE5/IE5.5/IE6/FF的HACK写到一起的,经过测试,终于找到了一个不错的方法,下面我们来看看怎么实现:
大家都知道用!important声明可以提升指定样式规则的应用优先权,如下面的例子:
-------------------------------------------------
E1{
background-color: red !important;/*提升优先权*/
background-color: blue;
}
-------------------------------------------------

但这样写在IE中会有个问题,看过我的《关于CSS样式表优先级》和《关于CSS样式表优先级补遗》,你会知道在IE6和FF中用!important声明可以提高优先级别,但在IE6中的!important声明并不是绝对的,它会被之后的同名属性定义所替换。也就是说在上面的例子中,IE6所应用的是最后一个背景色的值,即“blue”;而在FF中背景色的值为“red”。根据这一点,我们就可以把FF和IE的样式分离开。
OK ,解决了FF和IE的问题,现在来解决IE自己的问题。
看过了嘟嘟的《绕过IE6支持IE5的别一种写法-IE也支持">"》后有感而发,使用“>”IE是否真的可以认得?我们来看个例子:
-------------------------------------------------
E1{
background-color: red;
>background-color: blue;
}
-------------------------------------------------

在FF中得到的是背景色红色,而在IE中得到的背景色是蓝色,根据样式重定义的规则,如果浏览器可以识别“>”,则应该得到的蓝色的背景,因此可以知道“>”只有IE可以识别,这点是很重要的哦!在后面大家就会知道了。(注:我测试过其它的一些符号,如“~”、“`”、“<”等,都只有IE可以识别,在此为了感谢嘟嘟,推荐使用“>”)

我们再来看个例子:
-------------------------------------------------
E1{
>/*IE only*/background-color: black;
>/*IE only*/background-color /*IE5.5*/: green;
}
-------------------------------------------------

这个例子在IE6中得到了黑色的背景;而在IE5.5中得到的绿色的背景;在IE5中也得到了黑色的背景。这就说明了第二句定义只有IE5.5能识别,这是个很早就公布的HACK,可以在网上找到相关的资料,要注意的就是在属性名之后是有一个空格的。到此我们已经把FF、IE5.5、IE6分离出来了,那IE5呢?其实现在我们只要把IE5跟IE6分开就OK了,来看看例子:
-------------------------------------------------
E1{
>/*IE only*/background-color: red;/*IE5*/
}
E1/*IE5.5+*/{
>/*IE only*/background-color: black;
}
-------------------------------------------------

这里我们又用到一个HACK,就是“E1/**/{}”,这个定义在IE5以上的版本才能识别出来。这个例子得到的结果是,在IE5中的背景色为红色;在IE5以上版本中得到的是黑色背景。
终于把不同版本的浏览器都分离出来了,这样我们就可以为不同的浏览器定义不同的样式了。来看个完整的例子:
-------------------------------------------------
E1{
width: 500px;
height: 50px;
background-color: red !important;/*FF*/
background-color: blue;/*IE5*/
text-align:center;
}
E1/*IE5.5+*/{
>/*IE only*/background-color: black;/*IE6*/
>/*IE only*/background-color /*IE5.5*/: green;
}
-------------------------------------------------

需要注意的是,在上面例子中“background-color”定义的顺利不能改变,即FF-IE5-IE6-IE5.5。对于IE的定义在属性前要加“>”,因为“E1/**/{}”这个HACK在FF中可以识别。也许你会想,上面的例子不是可以写成:
-------------------------------------------------
E1{
width: 500px;
height: 50px;
background-color: red;/*FF*/
>background-color: blue;/*IE5*/
text-align:center;
}
E1/*IE5.5+*/{
>/*IE only*/background-color: black;/*IE6*/
>/*IE only*/background-color /*IE5.5*/: green;
}
-------------------------------------------------

这样不就又可以省下几个字节?是没错,可是HACK不是标准,如果滥用HACK,那只会离标准越来越远!

企业网站常用中英文对照
作者:purecss 日期:2006-06-12

网站导航 site map 

公司简介 PROFILE or COMPANY Profile or Company 

公司设备 EQUIPMENT Equipment 

公司荣誉 GLORIES Glories 

企业文化 CULTURE Culture 

产品展示 PRODUCT Product 

资质认证 quality certification 

企业规模 SCALE Scale 

营销网络 Sales Network 

组织机构 orGANIZATION organization 

合作加盟 Join in Cooperation 

技术力量 TECHNOLOGY Technology 

经理致辞 Manager`s oration 

发展历程 Development history 

工程案例 Engineering Projects 

业务范围 Business Scope 

分支机构 Branches 

供求信息 Supply & Demand 

经营理念 Operation Principle 

产品销售 SALES Sales 

联系我们 CONTACT US Contact Us 

信息发布 INFORMATION Information 

返回首页 HOMEPAGE Homepage 

产品定购 orDER order 

分类浏览 Browse by category 

电子商务 E-Business 

公司实力 STRENGTH Strength 

版权所有 Copy right 

友情连结 Hot link 

应用领域 Application Fields 

人力资源 Human Resource HR 

领导致辞 Leader`s oration 

企业资质 Enterprise qualification 

行业新闻 Trade news 

行业动态 Trends 

客户留言 Customer Message 

客户服务 Customer Service 

新闻动态 News & Trends 

公司名称 Company Name 

销售热线 Sales Hot-line 

联系人 Contact Person 

您的要求 Your requirements 

建设中 In construction 

证书 CERTIFICATE Certificate 

地址 ADDRESS Address ADD 

邮编 POSTAL CODE Zipcode 

电话 TEL Tel 

传真 FAX Fax 

产品名称 Product Name 

产品说明 DESCRIPTION Description 

价格 Price 

品牌 Brand 

规格 Specification 

尺寸 Size 

生产厂家 MANUFACUTURER Manufacturer 

型号 Model 

产品标号 Item No. 

技术指标 Technique Data 

产品描述 Description 

产地 Production Place 

销售信息 Sales Information 

用途 Application 

论坛 Forum 

在线订购 On-line order 

招商 Enterprise-establishing 

招标 Bid inviting 

综述 General 

业绩 Achievements 

招聘 Join Us 

求贤纳士 Join Us 

大事 Great Event 

动态 Trends 

服务 Service 

投资 Investment 

行业 Industry 

规划 Programming 

环境 Environment 

发送 Delivery 

提交 Submit 

重写 Reset 

登录 Enter 

注册 Login 

某公司技术支持 Powered by sdw.cn 

社区 Community 

业务介绍 Business introduction 

在线调查 Online inquiry Inquiry 

下载中心 Download 

会员登陆 Member Entrance 

意见反馈 Feedback 

常见问题 FAQ 

中心概况 General Profile 

教育培训 Education & Training 

游乐园 amusement park 

在线交流 Online communication 

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属性,只需要把代码改为

<script type="text/javascript">
就可以了

广州国际龙舟邀请赛之我见(组图)

昨晚因重装系统又很晚才睡,上午迷迷糊糊地听到手机响了,是前公司同事打来的,说要我过去给网站添加一些资料,顺便公司楼下有龙舟比赛。那时已经十一点多了,只好起来准备一下,带上相机在楼下吃了一碗面就出发了。
一个半小时后到了海珠桥脚,既然有龙舟就顺便看看了,于是就下车了,沿着滨江西路去公司,一路上就拍下了以下照片。





到了公司,因为是19楼,可以看到全景,在窗户上又拍了几张。
(这幢大厦当年我在那上班时龙舟赛时都不准上班,到时间要清场,今年倒是没那么严格了,我说公司有事找我的,就只多了一道手续登记一下竟然就让上去了。)





中间下了场大雨。



雨后,窗外整个天空好清晰啊,没有一点杂质的感觉,看着真舒服,很久没有看到城市的天空这样明净的了。










傍晚的照片不知怎么整个蓝光的感觉,我也没设置相机啊,难道傍晚的光是蓝色的?





珠江两岸的夜景还是不错的,虽然以前天天看看了两年多。


更多高清晰相片见:网易相册http://photo.163.com/photos/dscao/51232422/