[转]CSS常用的hack技巧

在iteye上看到一篇介绍CSS常用的Hack的技巧,转过来自己Mark下。

color:red; /* 所有浏览器都支持 */
 color:red !important;/* 除IE6外 */
 _color:red; /* IE6支持 */
 *color:red; /* IE6、IE7支持 */
 +color:red;/*IE7支持*/
 *+color:red; /* IE7支持 */
 color:red\9; /* IE6、IE7、IE8、IE9支持 */
 color:red\0; /* IE8、IE9支持 */
 color:red\9\0;/*IE9支持*/

/* webkit and opera */
 @media all and (min-width: 0px){ div{color:red;} }

/* webkit */
 @media screen and (-webkit-min-device-pixel-ratio:0){ div{color:red;} }

/* opera */
 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-

ratio:0) { div{color:red;} }

/* firefox * /
 @-moz-document url-prefix(){ div{color:red;}} /* all firefox */

html>/**/body div, x:-moz-any-link, x:default {color:red;} /* newest firefox */
 }

body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */

其他还有使用注释的方式对IE进行判断的方法也应该算是Hack的方法,这个可以参考前面的一篇文章:html+css判断各个IE浏览器版本

非万能的vertical-align

CSS属性中的vertical-align估计你并不陌生,小图标和文字不对齐,你肯定想到vertical-align:middle;,inputbox和文字不对齐,也可以用vertical-align:middle;解决,先说说怎么解决的吧,再谈谈不能用的时候。

特别强调的是,下面的这些情况主要是针对IE6的,个别不是专指IE6的会提出来。

图片和文字中间对齐

图片和文字在同一行,那么肯定会默认低端对齐,如果图片的高度比较高,那就会显得不入格。可以直接给图片加个vertical-align:middle;实现中间对齐。这个基本上都知道,而且各个浏览器都需要这么做。

图片和文字中间对齐

数字与中文的对齐问题

曾经遇到过这样的问题:下划线和文字贴得太紧,数字和中文不在同一水平线上。
影响原因:vertical-align属性的设置,影响到中英文不对齐。
解决方法:给中英文对象链接加vertical-align:baseline就可以解决

英文和中文对齐问题

顺便说下英文和中文的对齐问题,本来用line-height基线与基线之间的距离控制文字在中间。但汉字的基线和英文字母不用,所以不起到作用。
解决方法:从字体下手,simsun是宋体,在windows字体文件夹下宋体就是simsun,simhei是黑体。
把font-family设置成sinmsun,汉字和英文字母在同一平行线了。

inputbox和文字中间对齐问题

这个问题好像也是只在IE6中出现过,设置方法也是简单的使用vertical-align:middle;解决。不过jucelin在测试的时候发现也不存在这样的问题了,真让我晕死,算了,记录下,防止下次遇到。这个需要同时添加2个vertical-align:middle;才能解决好像。Mark一下,下次再找找问题所在。

<input name="" type="checkbox" value="" style="vertical-align:middle" /><span style="vertical-align:middle;">好地方</span>

汉字+数字或者汉字+字母不对齐问题

先看图:

汉字和数字不对齐

图 :不对齐的情况

调整好之后

图 : 调整后的情况

今天开始发现这个问题也是因为有inputbox的原因,可是写测试代码到时候发现和inputbox没有什么关系。出现这样的情况其实也是因为使用了vertical-align:middle;的原因。解决办法你也应该能想到,删除即可。另外jucelin还发现,不对齐的原因还与上面提到的字体问题。因此如果你出现这样的情况,应该检查2个方面,一个是不是添加了vertical-align,另一个就是字体的问题,建议使用用中文的字体。

贴一下测试的代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>非万能的vertical-align - power by jucelin</title>
<style>
.main{font-family:Arial;font-size:12px; vertical-align:middle;}
span{ display:block; width:100px; float:left;height:22px; line-height:22px;}
</style>
</head>
<body>
<div class="main">
<div style="width:100%">
	<span><input name="" type="checkbox" value="" />&nbsp;hao123</span>
	<span><input name="" type="checkbox" value="" />&nbsp;好123</span>
	<span><input name="" type="checkbox" value="" />&nbsp;好hao</span>
</div>
<div style="width:100%; clear:both;">
	<span><input name="" type="checkbox" value="" />hao123</span>
	<span><input name="" type="checkbox" value="" />好123</span>
	<span><input name="" type="checkbox" value="" />好hao</span>
</div>
<div style="width:100%; clear:both;">
	<span><input name="" type="checkbox" value="" />&nbsp;<a href="#">hao123</a></span>
	<span><input name="" type="checkbox" value="" />&nbsp;<a href="#">好123</a></span>
	<span><input name="" type="checkbox" value="" />&nbsp;<a href="#">好hao</a></span>
</div>
<div style="width:100%; clear:both;">
	<span><a href="#">hao123</a></span>
	<span><a href="#">好123</a></span>
	<span><a href="#">好hao</a></span>
</div>
</div>
</body>
</html>

今天出现这个问题其实主要是因为为了让文字和inputbox对齐,加了vertical-align属性,结果导致了汉字和数字、汉字和字母的不对齐。最后的解决方法是删除所有的vertical-align,结果文字和inputbox它也对齐了,相对于白折腾了半天。算了,Mark下,希望对以后有帮助。

关于vertical-align可以参考的文章

不同浏览器下vertical-align的显示效果:http://www.blueidea.com/tech/web/2008/5892.asp

关于vertical-align的基本知识:http://www.cnblogs.com/huanzhi/archive/2010/08/23/1806829.html

其他资料:http://hi.baidu.com/%E6%8C%AFting/blog/item/f08e211c4f249eed1bd576c3.html

 

IE下使用JavaScript画直线

因为项目的需求,需要在客户端绘制直线,以达到2点连线的情况。首先想到的就是使用JS了。百度里面Google了下,用JS画直线可以实现,但问题比较大,最简单的就是使用IE的VML画直线,在非IE下基本上都是使用HTML5画直线或形状。

先看下下面的例子

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"><!--这里需要引入vml-->
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
    v\:*{behavior:url(#default#VML);}/*这里需要定义样式,IE8下有所改变,下文提到*/
</style>
</head>
<body>
<v:line
from='200,200' <!--说是直线,实际上是线段,通过2个点来确定直线,这里是始点-->
to='600,100' <!--指定线段的终点-->
style='position:absolute;z-index:8'> <!--CSS样式-->
<v:stroke EndArrow="Classic"/><!--这里指定终点的样式,Classic就是箭头-->
</v:line>
</body>
</html>

测试上面的代码,放在IE下浏览,应该看到了一条带箭头的直线。看了上面的注释,应该多少了解一点。这里是使用的纯HTML方式画的直线。

什么是VML

VML的全称是Vector Markup Language(矢量可标记语言),矢量的图形,意味着图形可以任意放大缩小而不损失图形的质量,这在制作地图上有很大用途。在VML里面,标记使用的是XML扩张,需要一个namespace(命名空间),你可以使用惯用的“v”作为命名空间。VML不仅可以用来画直线,对于矩形、圆形、图像等都可以简单的实现。具体的可以参考下面的几个文档:

VML基本概念:http://www.cnblogs.com/zr824946511/archive/2010/02/25/1673520.html

VML中文手册:http://www.itlearner.com/code/vml/(须使用IE访问,否则不能看到实例效果)

特别的IE8+

jucelin也是刚刚能基本实现画直线的效果,可测试时发现IE8下面居然一片空白,百度里面Google了一下,发现IE8对VML进行了修改,所以蛋疼的问题又出来了。本来不同内核的浏览器下实现方式就不同,不同的IE还有不同的设计要求。伤不起。。。

IE8修改的地方:E文 http://ajaxian.com/archives/the-vml-changes-in-ie-8

译文:http://www.cnblogs.com/mingle/archive/2009/10/18/1585651.html

JS实现画直线

既然在IE8+下会有不同的设计方法,那么在写的时候也一起加上吧。实际上JS实现比较简单,下面是jucelin写的一段,贴出来分享下,希望得到高手的指导。

<html xmlns:v= "urn:schemas-microsoft-com:vml ">
<head>
<title>IE下使用JavaScript画直线-Power by jucelin</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<style>
v\:*{behavior:url(#default#VML);}
</style>
<script language="javascript">
function showline(){
	var v=document.createElement("<v:line></v:line>");
	var t=document.createElement("v:Stroke");
	//v.style="z-index:5;position:absolute;left:200;top:200";
	v.to="150,100";
	v.from="0,0"
	v.strokecolor="red";
	v.strokeweight="2px";
	t.EndArrow="Classic";
	v.appendChild(t);
	document.getElementById("id1").appendChild(v);
}
</script>
</head>
<body onLoad="showline()">
<div id="id1">
<!-- 上面的JS就是根据下面这段代码原型写的
	<v:line style="z-index:5;position:absolute;left:200;top:200" to= "0,150" strokecolor= "red" strokeweight= "2px">
	<v:Stroke dashstyle="shortdot" endarrow='classic'/>
	</v:line>
-->
</div>
<div style="font-size:22px; z-index:99">
<span style="z-index:100">123</span><span style="color:green; z-index:101; margin-left:-15px;">好</span>
</div><
</body></html>

为了使IE8下有效果,就在上面的代码上加了下面的一句话,以强制IE8+下显示IE7下的效果

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

上面的代码在IETest中测试通过,非IE下无效果(虽然知道不能实现,但还是抱着一点运气,呵呵)。

上面的代码中我还注释掉了一段代码,v.style在设置之后会提示找不到属性,jucelin现在不明白到底怎么回事。另外测试上面的代码还发现了奇怪的问题,我并没设置直线的style,而它的z-index属性仍然是最高的,而且<div id=”id1″>的position的属性是absolute。

再修改<div id=”id1″>的CSS属性

<div id="id1" style=" background:#000000; border:10px solid #000;">

显示的就是上面图2 的内容,具体是意义,其实也只是证实上一段的内容。

非IE浏览器下实现JS画直线

今天test到现在其实也就测试了IE下的,非IE下的基本上都是说通过HTML5来实现,具体的可以参考下面的一些文档:

在Firefox下画直线:http://www.cnblogs.com/youring2/archive/2009/07/25/1530862.html

HTML5教程:http://www.w3school.com.cn/html5/index.asp

HTML5绘图元素Canvas的使用说明:http://www.w3school.com.cn/html5/html_5_canvas.asp
上面提供的代码jucelin在chrome11.0,Firefox3.0,Opera11.52下均测试可以,因为这些浏览器都已经支持HTML5了,IE8目前还不支持HTML5的全部元素,希望IE9众望所归。

使用jQuery画直线

既然上面讨论了不同的浏览器有不同的设计方式,特别是蛋疼的IE,那么大虾们肯定会想到兼容所有的代码,jucelin首先想到的就是jQuery,呵呵,主要是jQuery可以解决很多兼容性的问题。

这里也不多说,因为我也还没研究,发现很多的插件很强大,如果只是用来画直线,都有点大材小用了。有时间的朋友可以参考下面写jQuery插件,我也会再看看,俺只要画直线,呵呵。

10 jQuery Drawing Plugins:http://www.jquery4u.com/plugins/10-jquery-drawing-plugins/

写在最后的话

1. 痛恨IE9之前的版本,因为它很蛋疼。

2. 在找资料的时候看到有点人提供了纯JS的方式,其实就是画点成线的原理来画“直线”,这样的方式很容易理解,写起来也比较简单,但关键是效率比较低,如果直线很长,就会很明显的增加IE的劳动量,用户体验很差。这个方法只能说在短距离,直线数目少的情况下考虑使用。

3. IE独有的VML很强大,使用起来速度一流,但多版本的设计确实让设计者很头疼。如果产品只是在IE下使用,jucelin还是推荐使用VML画直线。

4. 突然突然突然发现IETest和DW8有冲突,为了测试IE8下效果,电脑死机了2次,泪奔啊。。。

html+css判断各个IE浏览器版本

在编写网页代码时,各种浏览器的兼容性是个必须考虑的问题,有些时候无法找到适合所有浏览器的写法,就只能写根据浏览器种类区别的代码,这时就要用到判断代码了。

HTML代码中,区别各种浏览器的代码如下(以ie6为例,这时目前国内用户最多的,得益于盗版xp系统的广泛流传….不过这玩意也是绝大部分兼容性问题的根源,因为其标准化程度实在是….):

<!--[if IE 6]> 仅IE6可识别 <![endif]-->

<!--[if lte IE 6]> IE6及其以下版本可识别 <![endif]-->

<!--[if lt IE 6]> IE6以下版本可识别 <![endif]-->

<!--[if gte IE 6]> IE6及其以上版本可识别 <![endif]-->

<!--[if gt IE 6]> IE6以上版本可识别 <![endif]-->

<!--[if IE]> 所有的IE可识别 <![endif]-->

lte:就是Less than or equal to的简写,也就是小于或等于的意思。

lt :就是Less than的简写,也就是小于的意思。

gte:就是Greater than or equal to的简写,也就是大于或等于的意思。

gt :就是Greater than的简写,也就是大于的意思。

! :就是不等于的意思,跟javascript里的不等于判断符相同

以上这些代码写法都是针对ie各版本浏览器的,在其他浏览器中这些代码都会被解释为Html注释而直接无视掉,所以要想些针对firefox之类的非ie浏览器,需要这么写:

<!–[if !IE]><!–> 除IE外都可识别 <!–<![endif]–>

—————————————————————————————————————————————

CSS代码中,则可以根据各浏览器自己独立的可识别的特殊代码来编写区分浏览器的代码,例如为IE系列浏览器可读[\9],而IE6和IE7可读[*],另外IE6可辨识[ _ ](下划线);由于CSS读取时是按从上到下来的,同样属性靠后写的生效,因此可以依照顺序写下来,就会让每个浏览器正确的读取到自己看得懂得CSS语法,有效区分各类型或版本:

.classname{

background:blue; /*Firefox等非IE浏览器背景变蓝色*/

background:red \9; /*IE8 背景变红色*/

*background:black; /*IE7 背景变黑色*/

_background:orange; /*IE6 背景变橘色*/

}

类似的还有:

.classname {

background:black !important; /*非IE6 背景变黑色*/

background:orange; /*IE6 背景变橘色*/

}

解释下!important属性:!important意思是将该css样式提权,优先级别加高,而只有IE6以上版本才支持这个属性,所有可以用来区别IE6与其他版本的IE。

Hello world!

好吧,我承认,jucelin的微博“搬家”了,原来的独立微博已经无家可归,替而换之的是现在这个博客jucelin.com买了之后就一直闲置,本想挂个独立微博可能会有点内容,结果是宁愿在腾讯微博上聊,也不想发在这荒无人烟的地方。

这个博客将定位成个人的代码收藏夹,主要记录自己在项目中看到的不错的代码,分享一些自己写的一些代码,算是自己的笔记本了吧,如果你对分享的代码有更好的建议,真的希望你能够慷慨而谈,彼此交流,我相信这才是每个做技术的人更应该做的。

很多时候,IT程序猿都被定义成“宅”,就我个人而言,确实有点,但我还是愿意交流的,那怕是纯网络上的交流。因为有时在debug时找不到错误就会休息一会,再去Debug时很快就能找到问他所在(这句话怎么感觉那么别扭啊),同事们纷纷表示很赞同。

jucelin.cn还会继续更新,估计明年会慢慢讲数据和收录导入到这个博客上,逐渐停用掉cn域名。而后将com域名备案,迁入国内,当然这也是计划,估计实施起来有点困难,你懂的。

博客的开山废话写到这吧。你评不评论,留言框就在那里,但我坚信,评论可以一针见血!