编写跨浏览器兼容的 CSS 代码的金科玉律
作为 Web 设计师,你的网站在各种浏览器中有完全一样的表现是很多人的目标,然而这是一个永远无法真正实现的目标,很多人认为,完美的跨 浏览器兼容并不必要,这样说虽然没错,但在很多情形,一种近似的兼容还是很容易实现的,本文讲的是各种跨浏览器兼容的 CSS 编码准则和技巧。
理解 CSS 盒子模型
如果你想实现不需要很多奇巧淫技的跨浏览器兼容的 CSS 代码,透彻地理解 CSS 盒子模型是首要事情,CSS 盒子模型并不难,且基本支持所有浏览器,除了某些特定条件下的 IE 浏览器。
CSS 盒子模型负责处理以下事情:
CSS 盒子模型有以下准则:
处理 block 级对象时,必须注意以下事项:
在 Firefox 的 Firebug 中显示的盒子模型
理解 block 级和 inline 级 对象的区别
这个看似简单的问题事如果能透彻地理解,会受益匪浅。
下图讲解了 block 级对象和 inline 级对象的区别:
下面是 block 级对象和 inline 级对象的基本区别:
理解 Floating 和 Clearing 属性
实现多栏排版的最好方法是使用 float 属性,float 也是一个将使你受益匪浅的属性。一个 float 对象可以居左或居右,一个设置为 float 的对象,将根据设置的方向,左移或右移到其父容器的边界,或其前面的 float 对象的边界,而紧随其后的非 float 对象或内容,则包围在其相反的方向。
以下是使用 float 和 clear 属性的一些重要准则:
首先使用 IE 进行测试
虽然我们都痛恨 IE6 和 IE7,但当你开始一个新项目的时候,最好还是首先针对这两种浏览器进行测试,否则,如果你在设计在后期才想起针对 IE6 和 IE7 进行测试,将出现以下问题:
如果你设计的是个人项目,Web 程序等,则不建议你针对旧版本 IE 做太多工作,而对一些公司类站点,它的用户群中有大量 IE 用户,这些技巧会让你避免大量的头痛。如果将 IE 的问题归类为 IE 的 BUG 而不去处理,会带来很多负面的影响,和 IE 和平共处是 Web 开发与设计者不可逃避的现实。
译者注:在 IE6/7 仍有大量用户基础的国内(感谢中行,建行,农行,工行,以及各级政府网站),忽视这两种浏览器是极不明智的,首先针对 IE6/7 进行设计是一种很好的方法,一般来说,在IE6/7 通过测试的站点,在 Firefox,Chrome,Safari,Opera 等标准浏览器面前基本不会出现问题,前提是,你的 CSS 设计是基于 W3C 标准的。
IE 浏览器最常见的问题
永远不要指望在所有浏览器中都一模一样
在不同浏览器实现相同的体验个功能是可能的,实现近似像素级的一致外观也是可能的,但永远不要指望一模一样。
Form 控件在不同浏览器显示总是不同
以下是 Facebook 首页中的 select 控件,在5种不同浏览器的显示差异(基于 Adobe’s Browserlab 截图)
某些 Form 控件,如果要求必须跨浏览器一致,可以找到变通办法,如,可以使用图片 替代 submit 按钮,但有一些控件,比如 radio,select, textarea,文件选择框,是永远都不可能一模一样的。
字体的表现都有差异
先不谈有的字体在有的系统中根本不存在,即时存在,它们在不同系统的渲染效果也不完全一样,比如,Windows ClearType 支持 IE7,但不支持 IE6,导致同一个字体在 IE7 和 IE6 有不同的样子。
A List Apart’s 文章字体在 IE6 and IE7 中的区别
使用 CSS 清零
使用 CSS 清零(CSS Reset)是实现跨浏览器兼容的灵丹妙药,CSS 清零可以消除不同浏览器对 margin,padding 这些属性的默认表现,你可以更容易控制诸如对齐,间隙等等问题。推荐使用 Eric Meyer’s CSS 清零代码。
参考 SitePoint’s CSS 兼容表
SitePoint CSS Reference 是一个非常好的资源(下载离线版),可以用来检查某些 CSS 属性的跨浏览器兼容问题
结语
跨浏览器兼容是个永恒的话题,本文介绍的跨浏览器兼容 CSS 准则只是帮助 Web 开发设计者尽可能实现这一目标,除了这些,基于 CSS3 的渐进式增强设计也是一种趋势,Web 开发与设计者可以针对某些浏览器提供增强功能,而在不支持这些增强功能的浏览器中降级使用基本功能。
延伸阅读
本文国际来源:Smashing Magazine The Principles Of Cross-Browser CSS Coding
原文作者:Louis Lazaris
PHP上传文件–后缀名与文件类型对照表
网上有很多php文件上传的类,文件上传处理是php的一个特色(至少手册上是将此作为php特点来展示的,个人认为php在数组方面的优异功能更有特色),学php的人都知道文件上传怎么做,但很多人在编程中却可能忽视了一些细节问题,那就是文件的类型(MIME)。在表单将文件提交给php做处理之前,浏览器会先解析识别一边是什么类型的文件,之后进入php处理环节,php又会去识别解析此文件的原始类型(并不是说你改成什么后缀就是什么文件)。在这个过程中会有一些浏览器兼容,更准确来说是文件类型解析标识不一致的问题。这样在php处理Post过来的文件类型时就需要根据不同浏览器做更多的判断,最典型的就是IE和火狐下的区别。
比如说我用表单上传一个png的图片。在将文件从临时文件夹移动到指定目录(move_uploaded_file)之前,为了安全性与准确性我们都会检测文件的类型是否符合要求,如果我们要求的是图片文件,那么我们会想到gif->image/gif , jpg->image/jpeg , png-> image/png ,bmp->image/bmp 。但事实并不是这样,如果你在不同浏览器,特别是火狐(firefox)和ie下的测试,你会发现火狐下的图片文件上传会报错,提示文件类型不符合要求。原因就是处在文件类型上,因为在火狐下jpg的图片类型(MIME)是image/pjpeg,而ie才是image/jpg。 在ie下png图片的MIME是image/png,在火狐却是:image/x-png。同一文件在不同浏览器下的类型不一样,这样的问题还有很多,不如zip的压缩文件,在ie下是application/zip,而在火狐下则是:application/x-zip-compressed。为了方便大家,更是为了方便自己,今天我特地写了个页面来统一的一次性的完全的彻底的归纳一边php文件上传中的文件类型。 文件的类型MIME (Multipurpose Internet Mail Extensions) 是描述消息内容类型的因特网标准,在w3school提供了MIME的参考手册,但可是并没有区别浏览器之间的区别,所以并不完全可用。最好还是自己测试。下面是我自己写代码测试的结果,绝对准确实用。
该对应表包含:
php上传图片文件(gif,jpg,bmp,png,psd,ico)
php上传压缩文件(rar,7z,zip)
php上传可执行文件(exe)
php上传视频文件,音乐文件,歌词文件(avi,rmvb,3gp,flv,mp3,wav,krc,lrc)
php上传文本文件和文档文件(word->doc,excel->xls,幻灯片->ppt,pdf,chm)
php上传数据库文件(access文件,sql文件,con文件,日志文件log, dat文件)
php上传网页文件,脚本文件,字体文件(ini,php,html,htm,字体文件:ttf,fon, js ,xml)
php上传其他文件(class类文件,dll动态加载库文件)
史上最完全oophper亲测版php文件上传之文件类型对应表,ie,火狐各一份。
IE下
id
后缀名
php识别出的文件类型
0
gif
image/gif
1
jpg
image/jpeg
2
png
image/png
3
bmp
image/bmp
4
psd
application/octet-stream
5
ico
image/x-icon
6
rar
application/octet-stream
7
zip
application/zip
8
7z
application/octet-stream
9
exe
application/octet-stream
10
avi
video/avi
11
rmvb
application/vnd.rn-realmedia-vbr
12
3gp
application/octet-stream
13
flv
application/octet-stream
14
mp3
audio/mpeg
15
wav
audio/wav
16
krc
application/octet-stream
17
lrc
application/octet-stream
18
txt
text/plain
19
doc
application/msword
20
xls
application/vnd.ms-excel
21
ppt
application/vnd.ms-powerpoint
22
pdf
application/pdf
23
chm
application/octet-stream
24
mdb
application/msaccess
25
sql
application/octet-stream
26
con
application/octet-stream
27
log
text/plain
28
dat
application/octet-stream
29
ini
application/octet-stream
30
php
application/octet-stream
31
html
text/html
32
htm
text/html
33
ttf
application/octet-stream
34
fon
application/octet-stream
35
js
application/x-javascript
36
xml
text/xml
37
dll
application/octet-stream
38
dll
application/octet-stream
Firefox下
id
后缀名
php识别出的文件类型
0
gif
image/gif
1
jpg
image/pjpeg
2
png
image/x-png
3
bmp
image/bmp
4
psd
application/octet-stream
5
ico
image/x-icon
6
rar
application/octet-stream
7
zip
application/x-zip-compressed
8
7z
application/octet-stream
9
exe
application/octet-stream
10
avi
video/avi
11
rmvb
application/vnd.rn-realmedia-vbr
12
3gp
application/octet-stream
13
flv
application/octet-stream
14
mp3
audio/mpeg
15
wav
audio/wav
16
krc
application/octet-stream
17
lrc
application/octet-stream
18
txt
text/plain
19
doc
application/msword
20
xls
application/vnd.ms-excel
21
ppt
application/vnd.ms-powerpoint
22
pdf
application/pdf
23
chm
application/octet-stream
24
mdb
application/msaccess
25
sql
text/plain
26
con
application/octet-stream
27
log
text/plain
28
dat
text/plain
29
ini
application/octet-stream
30
php
application/octet-stream
31
html
text/html
32
htm
text/html
33
ttf
application/octet-stream
34
fon
application/octet-stream
35
js
text/html
36
xml
text/xml
37
dll
application/octet-stream
38
class
application/java
PHP javascript 系统集合
javascript http://www.open-open.com
用javascript获取屏幕高度和宽度等信息
网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth
Flash中与xml交互时不显示中文或显示乱码的解决办法
1、去掉所有System.useCodepage = true;
很多人都说显示不出中文用这个代码,System.useCodePage = true; 是使用系统编码 不是消除乱码,如果系统是 gb2312 你load的也是 gb2312 那么 这样就不会乱码了,但是如果load有韩文怎么办??结果就是 仍然乱码。
2、XML用UTF-8编码,文件保存也用UTF-8编码
统一用utf-8的编码,可以正常显示中文,又不会因为有英文或其他字符出现乱码,除非有特殊需要,否则最好就用这个编码,这是个好习惯。
3、动态文本是不是嵌入字符了?
选中fla中无法正常显示中文的动态文本,点击属性面板的"嵌入"按钮,打开嵌入面板,发现设置了嵌入字符,点击嵌入面板左下角的"不嵌入"按钮..
PS:很多人实在显示不出中文,就嵌入中文,这种业余办法很有效,不过很大的弊端就是你的flash文件膨胀了好几倍,这个方法实在不可取!
4、检查文本框字体是否支持显示中文
很多人都是拿国外源码改的,针对以上几点做了修改后,发现还是无法显示,细心的朋友可以看一下文本使用的字体是否支持中文,所以建议改成“宋体”或者是“Arial”之类的标准字体!