Tag-Archive for “ css ”
14
Nov
Post on 13:09, November 14, 2009, by Sue Zhou

最近两个项目由于客户的吹毛求疵和自己的强迫症并发而砸了整整两天时间在IE6的美化方面,时间没白费,经验教训皆有。以下分享的一些Tips纯属个人观点:

最好的PNG fix Javascript—- unitPngFix.js

官方网站 (http://labs.unitinteractive.com/unitpngfix.php)
试过十多个不同版本的Png fix,各自的优缺点都很明显,推荐的这个版本至今依然在缓慢而持续的更新着。除了大家都会的修正<img>里的PNG图片,选用他家产品的几个主要理由为:

  1. 修复PNG图片且不改变原有图片的尺寸,不会出现拉伸图片的情况
  2. 可修复PNG格式的背景图片(尽管对于重复属性的背景图片还是会有不同程度的bug,但已经可以简单的通过更改背景图片等简单方法解决)
  3. 可以全局修复,也可以仅修复指订图片(via class=”unitPng”)

最好用的字体替换程序 —- Cufón

官方网站(http://cufon.shoqolate.com/generate/)

我到今使用过三种字体替换程序:sIFR, FLIR (Facelift image replacement), 和现在选择的Cufón。下面是各程序的比较:

sIFR FLIR Cufon
编写语言 Flash, ActionScript, JavaScript PHP, JavaScript JavaScript
替换 生成swf文件 以单个字母为单位的图片,保存在服务器的cache文件夹内 以单词为单位的图片
配置 配置部分分为js config和css style两部分,用起来其实有点复杂 下载解压后乍一眼看去很复杂,有很多文件(夹),配置文件不难,但有些繁琐。 配置异常简单
优点 不需要独立的字体文件,支持font suitcase这类字体文件包 由于他是把整个字体文件上传到服务器中的,所以对于像中文这类字体文件较大的“大”字体的支持性较好。 文件小,配置简单,对IE6的天然支持性好
缺点 1) load页面时可以看到视觉上明显的字体替换过程──一个明显的页面跳跃。 2)不能直接读取CSS文件,需要在配置文件中另外设置。 1)如果替换的地方比较多会在服务器上生成一堆垃圾缓存图片,访问量如果大的话会占空间。2)生成的字体和原字体很近似,但是不相同,视觉上感觉比较“脆”,字母和字母之间的间距有的较正常略大。对于line-height等CSS属性的支持性还有待提高。 1)和unitPngFix的全局修复功能有冲突 2)目前只支持TTF,OTF类的单个字体文件,不支持字体包 3)对于中文这种字体文件过大的字体,上传生成JS过程会失败。

对于cufon和unitPngFix全局修复冲突的解决办法

  • 对要在IE6中需要修复的图片或背景图片所在的容易中添加(class=”unitPng”)。
  • 由于unitPngFix默认是全局修复,为了避免某一页面中没有需要修复的图片,在footer里(或者其他任何不显眼,不影响布局的地方)添加一张5px×5px左右大小的空白png图片,并添加(class=”unitPng”)。
Category: 分享  Tags: , ,  19 Comments
11
Sep
Post on 11:38, September 11, 2009, by Sue Zhou

In response to: css3之rounded corner

Here is a simple example to create 5px radius rounded corner.

Image part:
corner images
for IE7 and above, using PNG images: corner-tl.png, corner-tr.png, corner-bl.png, corner-br.png
for IE6, using non-PNG instead, or try using Unit PNG Fix (unitpngfix.js) to hack.

HTML part:

<div class="round">
	Massive content goes here.
</div>

CSS part:

.round {
	padding:5px;
	background:#238427;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	*padding:0;
}

.wrap-tl {
	background: url(assets/corner_tl.png) top left no-repeat;
	_background: url(assets/corner_tl.gif) top left no-repeat;
}
.wrap-tr {
	background: url(assets/corner_tr.png) top right no-repeat;
	_background: url(assets/corner_tr.gif) top left no-repeat;
}
.wrap-bl {
	background: url(assets/corner_bl.png) bottom left no-repeat;
	_background: url(assets/corner_bl.gif) top left no-repeat;
}
.wrap-br {
	background: url(assets/corner_br.png) bottom right no-repeat;
	_background: url(assets/corner_br.gif) top left no-repeat;
	padding:5px;
}

jQuery part:

$(document).ready(function(){
	if($.browser.msie){
		$('.round').wrapInner('<div class="wrap-tr"><div class="wrap-tl"><div class="wrap-bl"><div class="wrap-br"></div></div></div></div>');
	}
});

Ideally, the jQuery code will made the HTML code looks like the following in IEs.

<div class="round">
	<div class="wrap-tr">
		<div class="wrap-tl">
			<div class="wrap-bl">
				<div class="wrap-br">
					Massive content goes here.
				</div>
			</div>
		</div>
	</div>
</div>
Category: 分享  Tags: , ,  One Comment
18
Jun
Post on 11:48, June 18, 2009, by Sue Zhou

IE8正式版的发布只是证明了IE家族里又出了一个鸡肋。身为浏览器大家庭里占一定比重的一员,居然对CSS3还是我行我素的不支持,似乎MS已经不再在乎其浏览器市场份额逐年下跌了。

WordPress的2.8正式版的后台更漂亮点了,用户交互更亲和,虽然在2.7的基础上视觉效果改变不多,升级后突然心血来潮的去IE下看了看效果,发现IE下还是比较难看,虽然还是实现了按钮等rollover的渐变背景效果,但是圆角就彻底被放弃了,IE下效果就是方方正正的一个个模块。想想也许这也不失是一个解决办法──与其花费大把的时间去让不听话的IE漂亮一点,还不如对IE的界面采取另一种相似的设计,丑是丑了点,但是引用我们单位Dave当时说过的一句话 “People who choose IE does not deserve better design.

言归正传,本篇的重点是总结一下在各浏览器下圆角的实现方法。现在许多乖浏览器如Firefox, Safari, Opera已经支持CSS3中的某些语句,特别是border-radius这一创造圆句的功能,太赞了,一句CSS代码就解决了头疼的问题,使用方法如下:
CSS3 (not yet finalised)

border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius
border-radius

Mozilla equivalent

-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft
-moz-border-radius-topleft
-moz-border-radius

moz-border-radius

WebKit equivalent

-webkit-border-top-right-radius
-webkit-border-bottom-right-radius
-webkit-border-bottom-left-radius
-webkit-border-top-left-radius
-webkit-border-radius

webkit-border-radius

Opera and KHTML browsers

-opera-border-radius
-khtml-border-radius

由于IE家没有支持CSS3的,所以对于IE下的圆角要另外花功夫。主要用了CSS和png图片及container的嵌套(对IE6,由于其不支持png,各种hacker对png背景图片的处理也不是太理想,于是特别创建了一堆gif图片,不胜其烦),总结了一下代码如下:

(暂时不总结了,下回用到再说吧)

———

Reference: http://www.the-art-of-web.com/css/border-radius/

05
Jun
Post on 09:54, June 5, 2009, by Sue Zhou
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 {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;}

body { line-height:1;}

ol, ul { list-style:none;}

blockquote, q {	quotes:none;}

/* remember to define focus styles! */
:focus { outline:0; }

/* remember to highlight inserts somehow! */
ins {	text-decoration:none;}
del {	text-decoration:line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse:collapse;
	border-spacing:0;
}

Read more…

Category: 分享  Tags:  Leave a Comment
27
Mar
Post on 11:42, March 27, 2008, by Sue Zhou

由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。

解决的办法
由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。比如IE6能识别下划线_和星号*,IE7能识别星号*,当不能识别下划线_,而firefox两个都不能认识。等等。

书写顺序,一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。

比如要分辨IE6和firefox两种浏览器,可以这样写:

<style>
div{
    background:green; /* for firefox  */
    *background:red; /* for IE6  */
}
</style>
<div>我在IE6中看到是红色的,在firefox中看到是绿色的。</div>

<style>
    div{ background:green; /* for firefox */
    *background:red; /* for IE6 */ }
</style>
<div>我在IE6中看到是红色的,在firefox中看到是绿色的。</div>

解释一下:

上面的css在firefox中,它是认识不了后面的那个带星号*的东东是什么的,于是将它过滤掉,不予理睬,解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。

在IE6中呢,它两个background都能识别出来,它解析得到的结果是:div{background:green;background: red;},于是根据优先级别,处在后面的red的优先级高,于是当然这个div的背景颜色就是红色的了。

区分IE6,IE7,firefox区别不同浏览器,CSS hack写法:

  • 区别IE6与FF:
    background:orange;
    *background:blue;
  • 区别IE6与IE7:
    background:green !important;
    background:blue;
  • 区别IE7与FF:
    background:orange;
    *background:green;
  • 区别FF,IE7,IE6:
    background:orange;
    *background:green !important;
    *background:blue;

注:IE都能识别*;标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;

另外再补充一个,下划线”_”, IE6支持下划线,IE7和firefox均不支持下划线。于是大家还可以这样来区分IE6,IE7,firefox

  • background:orange;
    *background:green;
    _background:blue;

注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。

Category: 分享  Tags:  One Comment