分类目录归档:前端设计

前端设计,主要转载和原创的jQuery、JS、css等方面的知识

用JS实现表格行合并

在我们现在做的OA系统中,表格已经成为不可缺少的重要组成部分,如果没有表格,我们的工作可能会增加很多。为了美观表格,常常需要将表格中相同内容的行进行合并,表格中的专用标签就是rowspan,描述一下就是将相邻2行或多行中相同位置的列进行合并,当然合并使用前提的,如内容相同,ID相同等等。这里jucelin写了个用JS实现表格行合并的代码,主要使用ID来判断的,不足是出现了相同的ID,但如果调用getElementById的话,在合并之后调用即可。

整个代码都比较简单,jucelin加入了各种判断,主要是为了匹配各种情况,也没找到相关的优化方案。

核心代码(双击代码可以编辑复制):

<script language="javascript">
function TableRowsSpan(tableID, ColList) {
	var ColArray = ColList.split(",");
	var TableName = document.getElementById(tableID);
	var TableRowsCount = TableName.rows.length;
	for (j = ColArray.length - 1; j >= 0; j--) {
		PreId = "";
		CurId = "";
		TempCount = 1;
		for (i = 0; i <= TableRowsCount; i++) {
			if (i != TableRowsCount) {
				CurId = TableName.rows[i].cells[ColArray[j]].id;
				if (CurId != "") {
					if (CurId == PreId) {
						TempCount += 1;
					}
					 else {
						if (TempCount > 1) {
							SpanRows(TableName, i, j, TempCount, ColArray[j]);
						}
						PreId = CurId;
						TempCount = 1;
					}
				}
				 else {
					if (TempCount > 1) {
						SpanRows(TableName, i, j, TempCount, ColArray[j]);
					}
					PreId = CurId;
					TempCount = 1;
				}
			}
			 else {
				if (TempCount > 1) {
					SpanRows(TableName, i, j, TempCount, ColArray[j]);
				}
				PreId = CurId;
				TempCount = 1;
			}
		}
	}
}
function SpanRows(TableName, i, j, TempCount, ColArrayj) {
	TableName.rows[i - TempCount].cells[ColArrayj].rowSpan = TempCount;
	for (m = i - TempCount + 1; m <= i - 1; m++) {
		TableName.rows[m].deleteCell(ColArrayj);
	}
}
</script>

参数说明

tableID : 表格的ID,即选择要被操作的表格

ColList : 被选表格中需要需要合并的列,从第0个开始,即第一列则填0,以半角逗号分割,超出最大值出错

演示页面

https://jucelin.com/wp-content/uploads/2012/01/TableRowsSpan.html

版权说明

JS实现表格行合并的代码是手敲的,思路是自己想的,如果你觉得有必要,就在适当的位置添加上jucelin的名字或网址。本代码自由转载,自由修改,自由使用,如果你有改进,发我一份则十分感谢。

最后声明

JS实现表格行合并的代码你可以自由使用,但建议你根据实际需求修改后再应用到实际生产中去,避免不必要的资源浪费。越强大越智能,功能越强的代码都是以消耗资源为前提的,并不是每个产品都需要写个jQuery类型的功能库。

jQuery插件初识:Title提示插件jTipsShow

jQuery插件多如牛毛,jQuery的高手也是随处可见,作为目前主流javascript框架,jQuery已经是无孔不入。咱也跟上时髦,做点特效,自己观赏观赏,并作为以后参考。高手有时间帮忙指导指导,先谢过。

一、写在前面的话:

jucelin也是初学者,写这么个小插件用了一个上午的时间,真是会者不难,难者不会。虽说Title提示类插件已经有很多高手写出来了,如张鑫旭的jQuery万能浮动框插件,功能很强大,但就是有些代码还看不懂,所以自己用最简单的方法,自己学习写了个。

再者工作中经常要用到使用表格来显示数据,但苦于界面宽度及页面美观的限制,一些内容只能显示部分,显示全部则用title来显示,可惜的是IE的一个怪毛病,鼠标放上去之后一段时间后显示,显示一段时间后就会消失,如果内容较多,使用者准备仔细阅读时,显示的title就消失了。鉴此需求,写个脚本,应该还算值,原本用在单页面的,在对jQuery插件的好奇心下,就封装成一个插件。

二、jQuery插件的基础知识

jQuery为开发插件提拱了两个方法,分别是jQuery自身类的拓展和给jQuery对象添加方法。

1.jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法

//插件定义
(function($) {
	$.extend({
		trim: function(obj) {
			return (obj + ' trim');
		}
	})
})(jQuery);

//调用
alert($.trim('aa'));

2.jQuery.fn.extend(object);给jQuery对象添加方法

//插件定义

(function($) {

$.fn.alertWhileClick = function() {

$(this).click(function (){

alert($(this).val() + "2");

});

}

})(jQuery); //页面上为:<input id="input1" type="button" value="test"/>

//调用

$('#input1').alertWhileClick();

三、上代码

请直接访问这里:jQuery-tipsShow

四、插件使用方法

1.先引入jQuery,在引入jTipsShow

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="jquery-tipsshow.js"></script>

2.调用插件

<script language="javascript">

$(document).ready(function(){

//span-title,根据情况自己选择

$("#tipcontain").jTipsShow({

delaytime:200,

tipsTag: 'span',

tipsTitle: 'title'

});

//span-rel,根据情况自己选择

$("#tipcontain").jTipsShow({

delaytime:200,

tipsTag: 'span',

tipsTitle: 'rel'

});

//td=title,根据情况自己选择

$("#tipcontain").jTipsShow({

delaytime:200,

tipsTag: 'td',

tipsTitle: 'title'

});

});

</script>

3.初始化参数说明

titleValue: '',//title的默认值,这个基本上没什么用,初始化了也会被替换掉,添加在插件中主要是全局使用

tipsTag: 'span',//需要显示内容的容器

tipsTitle: 'title',//显示框中要显示的内容

delaytime:500//延时,特效用的

另外被查找的容器tipcontain会被定义成position:relative,所以需要注意样式。

五、总结下

原本参考着别人的插件写的,没有查看jQuery插件的基础知识,导致两种方法弄混了,怎么调试都出错,不会走,就想跑了,呵呵,惭愧下。这个插件还是可以继续拓展的,而且效率方面可能也不是最优的,因为我还没学习到这块的内容,以后再看看能不能优化,也希望你能停下脚步,帮俺看看。

下载插件JShttps://jucelin.com/wp-content/uploads/2012/01/jQuery-tipsShow1.js

在线演示文档:https://jucelin.com/wp-content/uploads/2012/01/jTipsShow.html

六、参考资料:

jQuery插件开发:http://www.zhuoda.org/irini/112855.html

jQuery插件开发全解析:http://www.iteye.com/topic/545971

jquery插件开发范例—A Plugin Development Pattern:http://www.iteye.com/topic/349020

更多参考资料请google:http://www.google.com

CSS换行的那些事

CSS网页布局中,常常会遇到这样的问题,强制文字换行,而不是在一行内显示撑开容器影响布局。而有些时候可能会强制内容不换行,多出的

部分隐藏掉即可,关于强制不换行与强制换行的一些CSS属性52CSS.com作一些整理,希望能给大家的工作和学习提供参考。

先了解以下几个属性:

强制不换行

p.xx {

white-space:nowrap;

}

自动换行

p.xx {

word-wrap: break-word;

word-break: normal;

}

强制英文单词断行

p.xx {

word-break:break-all;

}

CSS设置不换行:

overflow:hidden 溢出隐藏

white-space:nowrap 不换行

pre 换行和其他空白字符都将受到保护

nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇br对象

CSS设置强制换行:

word-break:break-all 强制断开实现转行

normal ; 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行

break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。对于中文,应该使用break-all 。

几个重要属性的补充阅读:

white-space:http://www.52css.com/css/c_whitespace.html

word-wrap:http://www.52css.com/css/c_wordwrap.html

word-break:http://www.52css.com/css/c_wordbreak.html

overflow:http://www.52css.com/css/c_overflow.html

欢迎大家补充,52css.com提供了更多实例供大家参考。

原文摘自52css.com,原文地址:http://www.52css.com/article.asp?id=767

IE BUG:内联的图片超链接失效

BUG描述下先:在标签<a>下加入<span>和<img>标签,并将<a>和<span>标签定义为display:block,设定大小,测试发现鼠标放在图片是不会显示手型,图片的链接也“失效”了(其实未失效,下面解释),点击没有任何效果,但点击<a>标签的空白位置,链接依然有效。

适用平台

IE6-8下出现,IE9未测试,Chrome正常。

BUG重现

下面是专门写的一个测试页面,有兴趣的可以测试下。

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>IE BUG:内联的图片超链接失效 - Design by jucelin.com</title>

<style>

.test-a{display:block; width:100px; height:100px; background:#eee;}

.test-a .test-img{display:block; width:50px; height:50px; background:yellow;}

.test-a .test-title{display:block;}

</style>

</head><body>

<div>

<a href="https://jucelin.com" target="_blank">

<span><img src="Images/form.png" border="0" /></span>

<span>jucelin.com</span>

</a>

</div>

<div>

<a href="https://jucelin.com" target="_blank" class="test-a">

<span class="test-img"><img src="Images/form.png" border="0" /></span>

</a>

</div>

</body></html>

下面是测试的截图(图片丢失):

图中的鼠标应该是正常的鼠标,单截图没办法截下鼠标的样式,就随便找了个样式演示下。

从测试可以看出来,图片的链接实际上仍然存在的,鼠标放上去之后在IE的状态栏中显示了链接的地址,但单击时,则链接无法相应。jucelin也解释不了这其中的原因,只能记下来自己以后注意下。

解决办法

BUG 就找个Hack的方法补补,将img所在的span添加position:relative; z-index:-1;样式,就是将span的层级放到a的下方,此时的要求是a不能有背景色,否则img就看不到了。另外使用JS也可以很好的解决。

相关文档

IE6,7中, 图片导致超链接失效的bug:http://blog.163.com/thinker_creator/blog/static/101933149200941994831531/

网页下雪JS代码

圣诞节了,看到网易的活动页面上有个下雪的特效,就下下来看看,使用的是JS特效,看的比较浅,目前只会简单的使用下,不知道有没有高手能解析下。这里贴出来网页下雪JS代码,如果需要的朋友可以玩玩。

显示样式

正如你在我的博客上看到的,全屏,背景建议不是纯白,否则看不到雪花,你不可能把雪花调彩色吧,哈哈。(好吧,我的博客背景有些白,看的不明显,正考虑要不要调成彩色的,可找了半天没彩色的雪花,如果你有,记得给我个哦,蓝色的就算了,因为我链接的颜色的是蓝色的)

使用方法:

直接复制下面的代码粘贴到你博客页面底部模版。

<script type="text/javascript" language="javascript">

(function(){function k(a,b,c){if(a.addEventListener)a.addEventListener(b,c,false);else a.attachEvent&&a.attachEvent("on"+b,c)}function g(a){if(typeof window.onload!="function")window.onload=a;else{var b=window.onload;window.onload=function(){b();a()}}}function h(){var a={};for(type in{Top:"",Left:""}){var b=type=="Top"?"Y":"X";if(typeof window["page"+b+"Offset"]!="undefined")a[type.toLowerCase()]=window["page"+b+"Offset"];else{b=document.documentElement.clientHeight?document.documentElement:document.body; a[type.toLowerCase()]=b["scroll"+type]}}return a}function l(){var a=document.body,b;if(window.innerHeight)b=window.innerHeight;else if(a.parentElement.clientHeight)b=a.parentElement.clientHeight;else if(a&&a.clientHeight)b=a.clientHeight;return b}function i(a){this.parent=document.body;this.createEl(this.parent,a);this.size=Math.random()*5+5;this.el.style.width=Math.round(this.size)+"px";this.el.style.height=Math.round(this.size)+"px";this.maxLeft=document.body.offsetWidth-this.size;this.maxTop=document.body.offsetHeight- this.size;this.left=Math.random()*this.maxLeft;this.top=h().top+1;this.angle=1.4+0.2*Math.random();this.minAngle=1.4;this.maxAngle=1.6;this.angleDelta=0.01*Math.random();this.speed=2+Math.random()}var j=false;g(function(){j=true});var f=true;window.createSnow=function(a,b){if(j){var c=[],m=setInterval(function(){f&&b>c.length&&Math.random()<b*0.0025&&c.push(new i(a));!f&&!c.length&&clearInterval(m);for(var e=h().top,n=l(),d=c.length-1;d>=0;d--)if(c[d])if(c[d].top<e||c[d].top+c[d].size+1>e+n){c[d].remove(); c[d]=null;c.splice(d,1)}else{c[d].move();c[d].draw()}},40);k(window,"scroll",function(){for(var e=c.length-1;e>=0;e--)c[e].draw()})}else g(function(){createSnow(a,b)})};window.removeSnow=function(){f=false};i.prototype={createEl:function(a,b){this.el=document.createElement("img");this.el.setAttribute("src",b+"http://mimg.127.net/hxm/quan/hd/111207_sdj/style/img/snow.gif");this.el.style.position="absolute";this.el.style.display="block";this.el.style.zIndex="99999";this.parent.appendChild(this.el)},move:function(){if(this.angle< this.minAngle||this.angle>this.maxAngle)this.angleDelta=-this.angleDelta;this.angle+=this.angleDelta;this.left+=this.speed*Math.cos(this.angle*Math.PI);this.top-=this.speed*Math.sin(this.angle*Math.PI);if(this.left<0)this.left=this.maxLeft;else if(this.left>this.maxLeft)this.left=0},draw:function(){this.el.style.top=Math.round(this.top)+"px";this.el.style.left=Math.round(this.left)+"px"},remove:function(){this.parent.removeChild(this.el);this.parent=this.el=null}}})();

createSnow("", 80);

</script>

注意看下最后一句话,上面的是函数,打乱了,createSnow(“”, 80);就是调用上面的函数,共2个参数,第二个参数就是密度,简单点就是页面上显示多少个雪花,切记不要调的太高,不然可能导致硬件不好的电脑卡死;第一个我也不知道是干嘛的,JS我了解的也不是很多,随便给个值的话,雪花图片被修改了,可给定雪花地址,显示依然出错,望高手解析。

或者直接在页面模版末尾添加下面的代码

<script type="text/javascript" src="http://hd3.mail.163.com/christmas/js/snow.js"></script>
<script language="javascript">
createSnow("", 800);
</script>

注意的地方

1. JS中指定了雪花图片的链接,记得修改为自己的雪花图片哦,否则人家图片地址换了,就没了。

2. 记得放在</body>前面,避免JS的下载影响了前面正文内容的下载,这样做基本上可以实现页面已经加载完成,雪花才开始飘。

3. 不知道怎么在模版里面添加?以WP为例,后台-外观-编辑-右侧选择“底部(footer.php)”-看到</body>没?就在之前回车,在空行上直接添加调用snow.js,也可以直接把上面最长的代码复制上去。

4. 删除的方法:请参照3,但要求倒着操作。

相关资料

JS来自页面:http://quan.163.com/activity/index.do

JS链接地址:http://hd3.mail.163.com/christmas/js/snow.js(这里只是JS的函数,需要createSnow(“”, 800);来调用)

雪花图标:http://mimg.127.net/hxm/quan/hd/111207_sdj/style/img/snow.gif(如果修改请在上面的JS上直接替换就行,建议绝对地址)

jucelin雪花图标:https://jucelin.com/wp-content/uploads/2011/12/snow.gif(圣诞节过后会撤掉)

蓝色的雪花图标:https://jucelin.com/wp-content/uploads/2011/12/snow_blue.png(适合博客背景色为纯白色的)

圣诞节快到了,jucelin提前恭祝各位我认识的、认识我的、以及不认识的天天发财,身体倍棒。

省市县城市联动JS库

插件名称:PCAS (Province City Area Selector 省、市、地区联动选择JS封装类) Ver 2.02 完整版

官方地址:http://www.popub.net/script/pcasunzip.html

使用说明:

演示地址:http://www.popub.net/script/pcasunzip.html

下载地址:http://www.popub.net/script/pcasunzip.js

应用说明:页面包含<script type=”text/javascript” src=”pcasunzip.js” charset=”gb2312″></script>

省市联动

new PCAS("Province","City")

new PCAS("Province","City","吉林省")

new PCAS("Province","City","吉林省","吉林市")

省市地区联动

new PCAS("Province","City","Area")

new PCAS("Province","City","Area","吉林省")

new PCAS("Province","City","Area","吉林省","松原市")

new PCAS("Province","City","Area","吉林省","松原市","宁江区")

new PCAS("Province","City","Area","","","")

省、市、地区对象取得的值均为实际值。

注:省、市、地区提示信息选项的值为””(空字符串)

使用案例:

<script type="text/javascript" src="pcasunzip.js" charset="gb2312"></script>

<select name="Province" ></select>

<select name="City"></select>

<select name="Area"></select>

<script language="javascript">

new PCAS("Province","City","Area","","","");

</script>

省:市:县:

 JS库下载:pcasunzip

高效 CSS 指南

避免通用类

确保选择器不是以通用类结束。

不要用标签名或class来描述ID类

如果你有一个选择器是以ID类作为关键选择符,请不要添加多余标签名上去。因为ID是唯一的,你不要为了一个不存在的理由而降低了匹配的效率。

差 – button#backButton { }
差 – .menu-left#newMenuIcon { }
好 – #backButton { }
好 – #newMenuIcon { }

不要用标签名来描述 class 类

和上一条类似,所有的 class 也是唯一的。你应该把标签名包含在 class 名中。

差 – treecell.indented { }
好 – .treecell-indented { }

尽量选择最特殊的类来存放选择器

降低系统效率的一个最大原因是我们在标签类中用了过多的选择符。通过添加 class 到元素,我们可以将类别进行再细分为 class 类,这样就不用为了一个标签浪费时间去匹配过多的选择符了。

差 – treeitem[mailfolder="true"] > treerow > treecell { }
好 – .treecell-mailfolder { }

避免子孙选择符

子孙选择符是CSS中最耗资源的选择符。他真的是非常的耗资源,尤其是在选择器使用标签类或通用类的时候。很多情况中,我们真正想要的是子选择符。除非有明确说明,在 UI CSS 中是严禁使用子孙选择符的。

差 – treehead treerow treecell { }
好一点,但还是不行(参照下一条) – treehead > treerow > treecell { }

标签类中不要包含子选择符

不要在标签类中使用子选择符。否则,每次元素的出现,都会额外地增加匹配时间。(特别是当选择器似乎多半会被匹配的情况下)

差 – treehead > treerow > treecell { }
最好 – .treecell-header { }

留意所有子选择符的使用

小心地使用子选择符。如果你能想出一个的不使用他的方法,那么就不要使用。特别是在 RDF 树和菜单会频繁地使用子选择符,像这样。

差 – treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon { }

请记住 RDF 的属性是可以在模板中被复制的!利用这一点,我们可以复制那些想基于该属性改变的子 XUL 元素上的 RDF 属性。

好 – .tree-folderpane-icon[IsImapServer="true"] { }

运用继承

理解哪个属性会继承,并允许他们这么做!我们已经清楚地建立了 XUL widgetry(?) ,所以你可以把 list-style-image 或 font 属性设置在父标签上,然后他会渗透到匿名内容里。这样,你就不需要浪费时间在匿名内容上直接写声明了。

差 – #bookmarkMenuItem > .menu-left { list-style-image: url(blah); }
好 – #bookmarkMenuItem { list-style-image: url(blah); }

在上面的例子中,定义匿名内容样式的需求(不用去搞明白 list-style-image 是如何继承的)导致需要一个 class 类的选择器,而这条规则实际上更应该以最唯一的 ID 类结尾。
请记住,特别是在匿名内容中,他们都拥有相同的 class 。上面那条不好的选择器写法导致每个菜单的图标都会被检查是否包含在收藏夹菜单栏目中。这是非常耗资源的(因为有很多菜单);这个选择器应该不要被收藏夹以外的菜单检查。

使用 -moz-image-region

把很多图片组合在一张图片里,然后用 -moz-image-region 来选择他们,会比每张图片分开存储,执行效率上高很多。

原文转自css88:http://www.css88.com/archives/402

分享个评论回复邮件的CSS样式

前几日看到QQ空间发来的邮件,使用一个什么简单的样式,感觉不错就替换了现在模板中自带的评论回复邮件的模板,由于我现在使用的主题是Weisay提供的,评论回复功能在functions.php中自带的,只需简单的替换即可,其他朋友的邮件回复样式可能要到具体的文档找找了。整个代码相当简单,高手记得飘过哦~

先看下面的演示:

您在jucelin博客上的留言有回复啦!

Google, 您好!

您曾在 [jucelin] 的文章 《这里是文章标题》 上发表评论:

Hi, 我来评论啦。

jucelin给您的回复如下:

亲,你的评论真见血了啊。

您可以点击 查看回复的完整內容

欢迎再次光临 jucelin

(此郵件由系統自動發出, 請勿回覆.)

OK,贴上代码:

<div style="background-color:#fff; border:2px solid #4C7BAA; color:#111; -moz-border-radius:8px; -webkit-border-radius:8px; -khtml-border-radius:8px; border-radius:8px; font-size:12px; width:702px; margin:0 auto; margin-top:10px; font-family:微软雅黑, Arial;">
	<div style="background:#4C7BAA; width:100%; height:60px; color:white;"><span style="height:60px; line-height:60px; margin-left:30px; font-size:15px;">您在' . get_option('blogname') . '博客上的留言有回复啦!</span></div>
	<div style="width:90%; margin:0 auto">
		<p>' . trim(get_comment($parent_id)->comment_author) . ', 您好!</p>
		<p>您曾在 [' . get_option("blogname") . '] 的文章 《' . get_the_title($comment->comment_post_ID) . '》 上发表评论:
		<p style="background-color: #EEE;border: 1px solid #DDD;padding: 20px;margin: 15px 0;">' . nl2br(get_comment($parent_id)->comment_content) . '</p>
		<p>' . trim($comment->comment_author) . ' 给您的回复如下:
		<p style="background-color: #EEE;border: 1px solid #DDD;padding: 20px;margin: 15px 0;">' . nl2br($comment->comment_content) . '</p>
		<p>您可以点击 <a href="' . htmlspecialchars(get_comment_link($parent_id)) . '">查看回复的完整內容</a></p>
		<p>欢迎再次光临 <a href="' . get_option('home') . '">' . get_option('blogname') . '</a></p>
		<p>(此郵件由系統自動發出, 請勿回覆.)</p>
    </div>
</div>

上面已经把参数带上了,如果你觉得麻烦,就直接换成你要的文字。在使用时,如果是直接邮件内容赋值给变量(好像都是这么做的),那么在赋值时注意使用单引号赋值,如$message=’这里是上面的代码哦’;

因为使用到了CSS3中的border-radius,所以IE9一下的浏览器不能看到圆角,建议使用非IE浏览器浏览!

[转]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。