Bob SpAce

Be myself!Do myself!

Category: Div+Css Page 1 of 2

什么叫高保真原型图?

高保真原型:几乎完全按照实物来制作的原型就是高保真,原型中甚至包含产品的细节、真实的交互、UI等等。
低保真原型:粗枝大叶的画出来的原型,表达产品大致的框架。

由于制作高保真的原型无论是时间还是成本都相对较高。所以大部分情况下,我们还是以制作低保真原型为主。

虽说是低保真原型,但也并不意味着产品原型所有部分都去粗枝大叶的去做。核心关键部分还是需要制作高保真的原型。

推荐一种在保真度和时间、成本之间折中的原型——T原型。将原型拆分为水平原型和垂直原型两个纬度去制作。

以制作一个网站产品原型为例:

水平原型就是只需要制作网站首页和第一层链接层面的原型。虽然用户可以看到首页里所有的菜单,并且可以自由地选择任何功能,但实际上被选择的功能是不能用的。这是从表现层出发的浅式原型。

垂直原型是只具备某一项功能的原型。比如说网站注册流程原型,用户虽然不能搜索和购买商品,但可以实际体验注册功能的整个流程。这是从操作层出发的深式原型。

如果只具备水平、垂直两种原型的其中一种,则与实际的用户体验相差甚远。因为水平原型最多算是界面的样本,而垂直型用户只能体验一个功能,没有其他选择。但是如果我们将其合二为一,就能行程一个可以让用户使用的原型了,这种广度和深度兼备的原型就是T原型。

原型做成什么样,还是要取决于你的项目的时间、成本以及原型制作能力。

CSS实现单行、多行文本溢出显示省略号(…)

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。

实现方法:

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

效果如图:
dome1

但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。

接下来重点说一说多行文本溢出显示省略号,如下。

实现方法:

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

效果如图:
dome2

适用范围:
因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;

注:

  1. -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
  2. display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
  3. -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

实现方法:

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}

效果如图:
dome3
适用范围:
该方法适用范围广,但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

注:

  1. 将height设置为line-height的整数倍,防止超出的文字露出。
  2. 给p::after添加渐变背景可避免文字只显示一半。
  3. 由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:<span>…<span/>);兼容ie8需要将::after替换成:after。

IE8的css hack

关注过IE8的css hack的人相信大家都在使用这个hack,就是“\9”的css hack:

.test{
color:#000000;                  /* FF,OP支持 */
color:#0000FF\9;       /* 所有IE浏览器(ie6+)支持 ;但是IE8不能识别“*”和“_”的css hack;所以我们可以这样写hack */
[color:#000000;color:#00FF00;      /* SF,CH支持 */
*color:#FFFF00;                 /* IE7支持 */
_color:#FF0000;               /* IE6支持 */
}

很多人再研究color:#0000FF\9;中的为什么IE6-IE8支持“\9”写法,和它的原理,我只是个工程师,不是科学家,我不懂为什么和它的真正原理,真的!很惭愧!

讲讲color:#0000FF\9:

 

color:#0000FF\9的hack支持IE6-IE8(其他版本没有测试),但是IE8不能识别“*”和“_”的css hack,所以我们可以使用

color:#0000FF\9; ;/*ie6,ie7,ie8*/

*color:#FFFF00;/*ie7*/

_color:#FF0000;/*ie6*/

来区分IE的各个版本。

至于为什么使用“\9”我真的不清楚原因,但是测试了其他0-13的数字,最终结果如下:

2009-07-18_125722

其中:OP表示Opera,SA表示Safari,Ch表示Chrome;当然你如果还有耐心可以测试“\14”,“\15”,“\16”。。。

从上面测试结果我们可以看出“\0”的写法只被IE8识别,ie6,ie7都不能识别,那么“\0”应该是IE8的真正hack。主流浏览器的CSS hack这样更好一些:

.test{
color:#000000;                  /* FF,OP支持 */
color:#0000FF\0;       /* IE8支持*/
[color:#000000;color:#00FF00;      /* SF,CH支持 */
*color:#FFFF00;                 /* IE7支持 */
_color:#FF0000;              /* IE6支持 */
}

其中:OP表示Opera,SA表示Safari,Ch表示Chrome;

 

转载自:css88.com

IE浏览器各版本的CSS条件判断

Browser Sandbox安装了下,发现之前一直用的一个纯CSS横向导航的水平居中出了问题,在IE8下完全居左了。找了很久没发现问题所在,索性每份CSS分开屏蔽,最终确定是针对IE的CSS问题,得避掉IE8只对IE7及以下版本设置。

之前只是针对所有的IE浏览器:

<!–[if IE]>
<link href=”Style/IE.css” rel=”stylesheet” type=”text/css” />
<![endif]–>
要避掉IE8的话就得:

<!–[if lt IE 8]>
<link href=”Style/IE.css” rel=”stylesheet” type=”text/css” />
<![endif]–>
lt在此作小于用,也就是小于IE8的版本都能识别。

或者:

<!–[if lte IE 7]>
<link href=”Style/IE.css” rel=”stylesheet” type=”text/css” />
<![endif]–>
lte在此作小于及等于用,也就是小于及等于IE7的版本能识别。

或者:

<!–[if !(IE 8)]>
<link href=”Style/IE.css” rel=”stylesheet” type=”text/css” />
<![endif]–>
<!–[if !(IE 8)]><![endif]–>在此单独避掉IE8版本。

兼容ie6,ie7,ff,opera,safari的水平垂直居中

图片文字垂直居中的最好方法

display:table-cell; 以表格单元格的形式显示对象 */

vertical-align:middle;/* 内容以对象中部对齐*/

display: inline-block;

inline-block的元素既可以像块元素一样定义宽高,又可以和内联元素排列在一行 */

若不理解,请深入了解上述3个属性的含义.valign针对ie,设置valign的宽高可帮助理解.(此句老手跳过)

 

<!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″ />
<title>完美的水平垂直居中!!–兼容ie6,ie7,ff,opera,safari的水平垂直居中</title>
<style media=”screen” type=”text/css”>
.wrapper{ width:700px; height:400px; background:#ccc; border:1px #000 solid;}
.holder{width:500px; height:200px; display:table; position:relative; margin:12px auto; border:1px solid #596480; background:#ffc;}
.holder div{*position:absolute; top:50%; left:0; display:table-cell; vertical-align:middle; width:100%;}
.holder p{position: relative; top:-50%; text-align:center; margin:0; padding:0;}
/*
分两套看
holder的 display:table
holder div的 display:table-cell; vertical-align:middle;
就可以实现在ff,safari和opera下的垂直居中,但是对ie系列无效
holder的 position:relative;
holder div的 *position:absolute;  top:50%; left:0;
.holder p的 position: relative;  top:-50%;
通过控制绝对层的位置实现ie6,7下的垂直居中
holder div中的*position:absolute是只给ie6和7看的css hack
对于水平居中要说的是如果holder div的width如果未指明100%,在ie7中它是不会自动延伸100%的,也就无法实现水平居中
*/
</style>
</head>
<body>
<div>
<div>
<div><p><img src=”http://bbs.blueidea.com/images/blue/logo.gif” /></p></div>
</div>
<div style=”line-height:40px; background:#006633; font-size:14px; color:#FFFFFF; font-weight:bold; text-align:center;”>
以上的图片垂直并且水平居中,您可以改变holder的height和width进行测试</div>
</div>
</body>
</html>

[download id=”17″]

 

IE6下Select的遮盖问题

这个问题可是ie6下相当经典的问题了。简单的说就是ie6下select永远在position:absolute的div上面,这个在想用div来做个对话框时经常会遇到。比方下面的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<body>
		<div>
			<select>
				<option>This is a select.</option>
			</select>
		</div>
		<div>This is upper div.</div>
	</body>
	<style type="text/css" title="">
	div{
		position:absolute;
		width:180px;
		height:60px;
	}
	.up{
		top:0;
		left:0;
		background:skyblue;
	}
	.down{
		top:15px;
		left:15px;
		background:yellowgreen;
	}
	</style>
</html>

因为在IE6中iframe是可以覆盖select,而div又可以覆盖iframe(一物降一物?),所以解决方法如下:

用iframe覆盖select

在up的div里添加一个iframe,大小至少要能覆盖select。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<body>
		<div>
			<select>
				<option>This is a select.</option>
			</select>
		</div>

		<div>
			<iframe></iframe>
			<div>This is upper div.</div>
		</div>
	</body>
	<style type="text/css" title="">
	div{
		position:absolute;
		width:180px;
		height:60px;
	}
	.up{
		top:0;
		left:0;
	}
	.up-inner{
		background:skyblue;
	}
	.down{
		top:15px;
		left:15px;
		background:yellowgreen;
	}

	.up .up-inner,.up iframe{
		position:absolute;
		width:100%;
		height:100%;
		top:0;
		left:0;
	}
	</style>
</html>

值得注意的是,如果iframe的allowTransparency=”true”时是不能遮盖住select。这种情况下,如果要透明可以用filter:Aplha(Opacity=?)。

iframe遮盖select是个不错的解决方案,但并不完美。被iframe遮盖的select某种意义上“消失”了。如果将iframe的透明度调低,就会发现,select不在那里。。比方将上例中的up的宽度调低,并加上透明度,超囧的一幕就会出现:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<body>
		<div>
			<select>
				<option>This is a select.</option>
			</select>
		</div>

		<div>
			<iframe></iframe>
			<div>This is upper div.</div>
		</div>
	</body>
	<style type="text/css" title="">
	div{
		position:absolute;
		width:120px;
		height:60px;
	}
	.up{
		top:0;
		left:0;
		filter:alpha(Opacity=80);
	}
	.up-inner{
		background:skyblue;
	}
	.down{
		top:15px;
		left:15px;
		background:yellowgreen;
	}

	.up .up-inner,.up iframe{
		position:absolute;
		width:100%;
		height:100%;
		top:0;
		left:0;
	}
	</style>
</html>

兼容IE6、7、8和火狐的遮罩层效果实现

.overlay{position: fixed; z-index: 100000;width: 100%;height: 100%;top: 0;left: 0;filter: alpha(opacity=50);opacity: 0.5;overflow: hidden;background-color: #000;}
*html { background:url(*) fixed; }
*html body { margin:0; height:100%; }
*html .overlay{ position: absolute; left: expression(documentElement.scrollLeft + documentElement.clientWidth – this.offsetWidth); top: expression(documentElement.scrollTop + documentElement.clientHeight – this.offsetHeight); }
遮罩层HTML代码:

<div id=”overlay” class=”overlay” style=”display:none”></div>

将上述代码添加到页面中,通过js函数控制“overlay”层的显示和隐藏来实现遮罩效果

如果你曾经收藏过许多关于CSS的最佳实践但还没开始利用它们,那么这篇文章将帮助你制作一个很好且很有组织的CSS文件来应用于一些CSS最佳实 践。在这里我将为为我的下一个项目制作一个基本的CSS模板文件。使用标准的重设(Reset)方法,定义一些基本的方便的类,命名一些常见的页面区域 等…

在开始之前,创建一个新建文件夹并将它命名为”styles”(您也可以命名自己喜欢的名字),然后在该文件夹下创建两个文件分别命名为“reset.css” 和 “style.css”。现在你的文件夹结构不出意外的话应该是这样的:

–root
|
styles
– reset.css
– style.css
|

1-单独使用一个全局CSS重设方法

我以Eric Meyer的重设为基础。只是去掉了其中的“ins”, “del”和 “table”,因为我实在是很少使用它们,因为某些原因又重新定义了“strong”“em”,我知道您也许会有自己的方式,所以您也可以自由为自己的文件定义。写完CSS重设后,将其存储为”reset.css”。

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: ”;
content: none;
}
:focus {
outline: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}

在这个重设文件里我去掉了“body”样式,因为通常我们在不同的项目中都会定义不同的”body”样式,所以我们将它放在style.css文件中。

2-在顶部为样式表添加描述注释

现在我们打开style.css来开始写一些基本的样式。在创建一个新样式文件(style.css)后,第一件事应该是在文件顶部写一些结构性的 注释,用来描述一些样式的细节,比如版本、作者、作者的详细联系方式等,这将帮助你和其他前端开发人员使用该文件。描述细节应当包括像作者姓名、版本和提 供更多信息的URL地址。我比较喜欢Wordpress格式,因为它比较广泛。

/*
主题名称: 玫瑰主题
URI: the-theme’s-homepage
描述: a-brief-description
作者: 您的姓名
作者 URI: 您的-URI
模板: 在这里可以提示它的父级模板
版本: 版本号
彬Go-集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
网址:http://blog.bingo929.com/
*/

3-定义便于搜索的目录表

现在,我们来一起定义我们样式的目录表。定义TOC能帮助其他人甚至自己更容易与阅读和理解代码。也许您会觉得这个没什么必要,但请相信我!

首先让我们看看它应当是什么样子的:

[目录表]
0- Reset
1- Global
2- Links
3- Headings
4- Header
5- Navigation
6- Middle
7- Forms
8- Extras
9- Footer

正如您看到的,我们将目录表从0到9分成10部分。

  • TOC非常简单以至于它不会花费您超过1分钟的时间。
  • 您不用为每个项目定义不同的TOC。
  • 命名的使用非常普遍,所以可以适合模本的任何部分。
  • 不使用动态的#ID和.class。
  • 它并不大所以不会占用很多Kbytes。
  • 顺序的数字很有用,用途请往下看。

4-使用注释将每个部分隔开并使用一个=标记

请看一下样式,在0部分我将之前的重设样式表reset.css导入。

/* =0 Reset
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
@import url(’reset.css’);
/* =1 Global

–––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =2 Links
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =3 Headings
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =4 Header
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =5 Navigation
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =6 Middle
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =7 Form
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =8 Extra
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =9 Footer
–––––––––––––––––––––––––––––––––––––––––––––––––––*/

在每个部分的分区注释中使用=标记,可以帮助您和您的团队其他成员快速找到需要的代码。大家都知道,在CSS样式中的声明几乎是不会使用等号的,所 以我们可以使用等号来帮助搜索。比如你想寻找表单的相关样式代码,可以先查看目录表中表单对应的数字,然后搜索”=7″便可以快速跳转到表单的相关代码区 域。

5-定义最常用的类

其实有一些类是我们要经常使用的,那我们为什么不一次性把它们都定义好呢?现在正是时候!我添加了一些个人比较喜欢的,当然您也可以按照自己的喜好进行增删改。将它们定义在“=1 Global”下。
我还把body选择器定义在了Global中。
注:一下定义类仅仅是比较简单的一些。

/* =1 Global
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
body {
line-height: 1;
font: normal 12px Arial, Helvetica, sans-serif;
vertical-align: top;
background: #fff;
color: #000;
}
.right {
float: right;
}
.left {
float: left;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.align-center {
text-align:center;
}
.justify {
text-align:justify;
}
.hide {
display: none;
}
.clear {
clear: both;
}
.bold {
font-weight:bold;
}
.italic {
font-style:italic;
}
.underline {
border-bottom:1px solid;
}
.highlight {
background:#ffc;
}
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignleft {
float:left;
margin:4px 10px 4px 0;
}
img.alignright {
float:right;
margin:4px 0 4px 10px;
}
.clearfix:after {
content: “.”;
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}

6-为链接和标题定义样式

最后,我们来定义适当的链接和标题的样式,因为他们在任何项目中都是必需的。如果你在制作某个网页,你不可能不是用它们。

/* =2 Links
––––––––––––––––––––––––––––––––––––––––––––––––––*/
a:link, a:visited {
color: #333;
}
a:hover {
color: #111;
}
a:active {
color: #111;
}
/* =3 Headings
––––––––––––––––––––––––––––––––––––––––––––––––––*/
h1 {
font: bold 2em “Times New Roman”, Times, serif;
}
h2 {
font: bold 1.5em “Times New Roman”, Times, serif;
}
h3 {
font: bold 1.2em Arial, Geneva, Helvetica, sans-serif;
}
h4 {
font: bold 1em Arial, Geneva, Helvetica, sans-serif;
}
h5 {
font: bold 0.9em Arial, Geneva, Helvetica, sans-serif;
}

style.css模板的最终代码

/*
主题名称: 玫瑰主题
URI: the-theme’s-homepage
描述: a-brief-description
作者: 您的姓名
作者 URI: 您的-URI
模板: 在这里可以提示它的父级模板

[目录表]
0- Reset
1- Global
2- Links
3- Headings
4- Header
5- Navigation
6- Middle
7- Forms
8- Extras
9- Footer
*/
/* =0 Reset
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
@import url(’reset.css’);

/* =1 Global
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
body {
line-height: 1;
font: normal 12px Arial, Helvetica, sans-serif;
vertical-align: top;
background: #fff;
color: #000;
}
.right {
float: right;
}
.left {
float: left;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.align-center {
text-align:center;
}
.justify {
text-align:justify;
}
.hide {
display: none;
}
.clear {
clear: both;
}
.bold {
font-weight:bold;
}
.italic {
font-style:italic;
}
.underline {
border-bottom:1px solid;
}
.highlight {
background:#ffc;
}
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignleft {
float:left;
margin:4px 10px 4px 0;
}
img.alignright {
float:right;
margin:4px 0 4px 10px;
}
.clearfix:after {
content: “.”;
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
/* =2 Links
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
a:link, a:visited {
color: #333;
}
a:hover {
color: #111;
}
a:active {
color: #111;
}
/* =3 Headings
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
h1 {
font: bold 2em “Times New Roman”, Times, serif;
}
h2 {
font: bold 1.5em “Times New Roman”, Times, serif;
}
h3 {
font: bold 1.2em Arial, Geneva, Helvetica, sans-serif;
}
h4 {
font: bold 1em Arial, Geneva, Helvetica, sans-serif;
}
h5 {
font: bold 0.9em Arial, Geneva, Helvetica, sans-serif;
}
/* =4 Header
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =5 Navigation
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =6 Middle
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =7 Form
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =8 Extra
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =9 Footer
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/

 

由于不同浏览器对于CSS解析结果不同,一段CSS代码在不同的浏览器下显示页面效果不一致,因此就需要写不同代码兼容各种浏览器,在不同的浏览器中都能得到预期的页面效果。

这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack。

CSS hack 的原理是不同的浏览器对CSS的支持及解析结果不一样以及CSS中的优先级的关系。

以CSS中的背景颜色属性background为例,简单介绍在IE6、IE7和Firefox(以下简称FF)下的CSS hack的写法。

区分IE(包括ie6和ie7)和FF

div.bg_color{
background:orange;*background:blue;
}

在IE下是显示blue,在FF下是orange。IE可以识别CSS中的*,由于CSS得优先级关系,在IE中显示的是最后设置的blue,而FF由于不能识别*,对于带*的属性不做解析。

区分IE6和IE7

div.bg_color{
background:orange !important;background:blue;
}

在IE6显示为blue,IE7下为orange,因为IE6不支持!important而IE7支持。

区别FF,IE7,IE6:

1. background:orange; *background:green !important; *background:blue;

2. background:orange; *background:green;  _background:blue;

IE6 IE7 FF
* ×
!important ×
_(下划线) × ×

不管用哪种方法书写,顺序都是firefox的写在前面,IE7其次,IE6的写在最后面。

附一张来自国外比较完整的CSS hack列表,相信对我们的书写兼容性的CSS有很大帮助。
CSS hack列表

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

Browsers-css in The Principles Of Cross-Browser CSS Coding

理解 CSS 盒子模型

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

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

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

CSS 盒子模型有以下准则:

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

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

  • 如果一个盒子的宽度设置为 100%,它就不能再设置 margins, padding, 和 borders,否则会撑破其父容器
  • 垂直毗邻的 margin 会引起复杂的坍塌问题,导致布局问题(比如两个垂直毗邻的 Block 对象,上面的对象的 bottom-margin 为 40,下面的对象的  top-margin 为 20,则两个对象的间距将是 40,而不是 60 – 译者)
  • 拥有相对位置和绝对位置的对象,拥有不同的行为

Css-box-model in The Principles Of Cross-Browser CSS Coding
在 Firefox 的 Firebug 中显示的盒子模型

理解 block  级和 inline 级 对象的区别

这个看似简单的问题事如果能透彻地理解,会受益匪浅。

下图讲解了 block 级对象和 inline 级对象的区别:

Block-inline in The Principles Of Cross-Browser CSS Coding

下面是 block 级对象和 inline 级对象的基本区别:

  • Block 级对象会自然地水平充满其父容器,因此没有必要为之设置 100% 宽度属性
  • Block 级对象的起始摆放位置是其父容器的左上边界,并顺排在其前面的兄弟 Block 对象的下方(除非设置 float 或绝对位置)
  • Inline 级对象会忽略其宽度和高度设置
  • Inline 级对象会随着文字排版,并受排版属性的影响(如 white-space, font-size, letter-spacing)
  • Inline 级对象可以使用 vertical-align 属性控制其垂直对齐,block 级对象不可以
  • Inline 级对象的下方会保留一些自然的空间,以适应字母 g 一类的会向下探出的笔画
  • 一个设置为 float 的 inline 对象将变成 block 对象

理解 Floating 和 Clearing 属性

实现多栏排版的最好方法是使用 float 属性,float 也是一个将使你受益匪浅的属性。一个 float 对象可以居左或居右,一个设置为 float 的对象,将根据设置的方向,左移或右移到其父容器的边界,或其前面的 float 对象的边界,而紧随其后的非 float 对象或内容,则包围在其相反的方向。

Float-css in The Principles Of Cross-Browser CSS Coding

以下是使用 float 和 clear 属性的一些重要准则:

  • 一个 float 对象,将从其置身的 block 级非 float 内容流中跳出,换句话说,如果你要将一个 box 向左边 float,它后面的 block 级非  float 对象会显示到下方,inline 级内容会在旁边包围
  • 要让一段内容从一侧包围一个 float  对象,这段内容必须要么是 inline 级的,要么也设置为相同方向的 float
  • 一个 float 对象,如果没有设置宽度,则会自动缩成其包含的内容的宽度,因此最好为 float 对象明确设置宽度
  • 如果一个 block  对象包含 float  子对象,会出现本文中阐述的问题。
  • 一个设置了 clear 属性的对象,将不会包围其前面的 float 对象
  • 一个既设置了 clear 又设置了 float 属性的对象,只有 clear:left 属性生效,clear:right 不起作用

首先使用 IE 进行测试

虽然我们都痛恨 IE6 和 IE7,但当你开始一个新项目的时候,最好还是首先针对这两种浏览器进行测试,否则,如果你在设计在后期才想起针对 IE6 和 IE7 进行测试,将出现以下问题:

  • 你将不得不使用一些奇巧淫技,甚至使用独立的 IE6/7 CSS,导致 CSS 文件臃肿。
  • 某些地方的布局将不得不重新设计
  • 会增加测试的时间
  • 你的布局在 IE/6/7 中和其它浏览器中不一样

如果你设计的是个人项目,Web 程序等,则不建议你针对旧版本 IE 做太多工作,而对一些公司类站点,它的用户群中有大量 IE 用户,这些技巧会让你避免大量的头痛。如果将 IE 的问题归类为 IE 的 BUG 而不去处理,会带来很多负面的影响,和 IE 和平共处是 Web 开发与设计者不可逃避的现实。

译者注:在 IE6/7 仍有大量用户基础的国内(感谢中行,建行,农行,工行,以及各级政府网站), 忽视这两种浏览器是极不明智的,首先针对 IE6/7 进行设计是一种很好的方法,一般来说,在IE6/7 通过测试的站点,在 Firefox,Chrome,Safari,Opera 等标准浏览器面前基本不会出现问题,前提是,你的 CSS 设计是基于 W3C 标准的。

IE 浏览器最常见的问题

  • IE6 中不可滥用 float,否则会带来内容消失以及文字重复等稀奇古怪的问题
  • IE6 中,float 对象,在 float 方向的那边,会出现双倍 margin,将 display 设置为 inline 会解决这个问题
  • IE6/7 中,一个没有直接或间接设置 hasLayout 的对象,会发生各种稀奇古怪的问题 (译者注:对这类问题,zoom 这个 css 属性可以帮很大的忙,将 zoom 设置为除了 normal 之外的其它值,可以迫使一个对象 hasLayout 同时不影响这个对象的任何视觉外观)
  • IE6 不支持 min-width, max-width, min-height, max-height 一类的属性
  • IE6 不支持固定位置背景图
  • IE6/7 不支持很多 display 属性值(如 inline-table, table-cell, table-row
  • IE6 中,只有 a 这个对象才可以使用 :hover 这个伪类
  • IE 的某些版本对某些 CSS 选择器支持很少(如属性选择器,子对象选择器)
  • IE6~8 对 CSS3 的支持很有限 (不过有一些变通方法)

永远不要指望在所有浏览器中都一模一样

在不同浏览器实现相同的体验个功能是可能的,实现近似像素级的一致外观也是可能的,但永远不要指望一模一样。

Form 控件在不同浏览器显示总是不同

以下是 Facebook 首页中的 select 控件,在5种不同浏览器的显示差异(基于 Adobe’s Browserlab 截图)

某些 Form 控件,如果要求必须跨浏览器一致,可以找到变通办法,如,可以使用图片 替代 submit 按钮,但有一些控件,比如 radio,select, textarea,文件选择框,是永远都不可能一模一样的。

字体的表现都有差异

先不谈有的字体在有的系统中根本不存在,即时存在,它们在不同系统的渲染效果也不完全一样,比如,Windows ClearType 支持 IE7,但不支持 IE6,导致同一个字体在 IE7 和 IE6 有不同的样子。

Cleartype-ie in The Principles Of Cross-Browser CSS Coding
A List Apart’s 文章字体在 IE6 and IE7 中的区别

使用 CSS 清零

使用 CSS 清零(CSS Reset)是实现跨浏览器兼容的灵丹妙药,CSS 清零可以消除不同浏览器对 margin,padding 这些属性的默认表现,你可以更容易控制诸如对齐,间隙等等问题。推荐使用 Eric Meyer’s CSS 清零代码。

Reset-wd in The Principles Of Cross-Browser CSS Coding

 

参考 SitePoint’s CSS 兼容表

SitePoint CSS Reference 是一个非常好的资源(下载离线版),可以用来检查某些 CSS 属性的跨浏览器兼容问题

Sitepoint-chart in The Principles Of Cross-Browser CSS Coding

结语

跨浏览器兼容是个永恒的话题,本文介绍的跨浏览器兼容 CSS 准则只是帮助 Web 开发设计者尽可能实现这一目标,除了这些,基于 CSS3 的渐进式增强设计也是一种趋势,Web 开发与设计者可以针对某些浏览器提供增强功能,而在不支持这些增强功能的浏览器中降级使用基本功能。

本文国际来源:Smashing Magazine The Principles Of Cross-Browser CSS Coding

原文作者:Louis Lazaris

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

Page 1 of 2

Powered by WordPress & Theme by Anders Norén