编写跨浏览器兼容的 CSS 代码


为 Web 设计师,你的网站在各种浏览器中有完全一样的表现是很多人的目标,然而这是一个永远无法真正实现的目标,很多人认为,完美的跨浏览器兼容并不必要,这样说虽然没错,但在很多情形,一种近似的兼容还是很容易实现的,本文讲的是各种跨浏览器兼容的 CSS 编码准则和技巧。

理解 CSS 盒子模型

如果你想实现不需要很多奇巧淫技的跨浏览器兼容的 CSS 代码,透彻地理解 CSS 盒子模型是首要事情,CSS 盒子模型并不难,且基本支持所有浏览器,除了某些特定条件下的 IE 浏览器。

CSS 盒子模型负责处理以下事情:

  • 一个 blcok (区块)级对象占据多大的空间
  • 该对象的边界,留白
  • 盒子的尺寸
  • 盒子与页面其它元素的相对位置

CSS 盒子模型有以下准则:

  • Block (区块)对象都是矩形 (事实上所有对象都如此)
  • 其尺寸由 width, height, padding, borders, 以及 margins 决定
  • 如果不设置高度,该盒子的高度将自动适应其包含的内容,加上留白等(除非使用了 float)
  • 如果不设置宽度,一个非 float 型盒子水平上将充满其父容器(扣除父容器的留白)

处理 block 级对象时,必须注意以下事项:

  • 如果一个盒子的宽度设置为 100%,它就不能再设置 margins, padding, 和 borders,否则会撑破其父容器
  • 垂直毗邻的 margin 会引起The Principles Of Cross-Browser CSS Coding

    原文作者:Louis Lazaris

    Louis Lazaris 是一位自由职业 Web 开发者,住在多伦多,他创办了 Impressive Webs, 以及 Interviews by Design,后者主要是一些著名 Web 设计师访谈,他的 Twitter 地址是 http://twitter.com/ImpressiveWebs。
    作者:Justin
    出处:http://justinw.cnblogs.com/




相关阅读:
MySQL中文参考手册--输入查询
系统优化:改变Vista脱机文件的缓存位置
Oracle操作中常见的错误和解决方法
asp.net中利用ajax获取动态创建表中文本框的值
ASP.NET程序中用Repeater实现分页
使用ASP实现文件上载(上传)的各种方法
有效管理你的Gentoo USE标记
MYSQL导入数据Got a packet bigger than...错误
用php解析html的实现代码
SELECT INTO和INSERT INTO SELECT的区别
Asp.net中的GridView导出遇到的问题
SQLServer:越“少”才会越安全
如何在 Netware 服务器中安装多块网卡
解决IE6不支持透明的PNG图片问题
快速导航

Copyright © 2016 phpStudy |