在西门大哥的博客中看到一篇文章：CSS实用小技巧，利用border属性实现一个标签做箭头，西门使用的是border，这里jucelin介绍另一种方法，用到的是一个特殊字符：◆。
演示：DEMO
代码：请狂击DEMO，然后右键，查看源代码（写得应该还算规范）。
主要用途：制作tips等。
实现原理：方法很简单，特殊字符◆就已经有了箭头的效果，那么用2个◆，用相对或绝对定位将他们完全重合，如果想做成向上的箭头，则再将下一层的◆向上移动1px。设置下颜色：下一层的使用的是下面内容部分的边框色，而上一层的◆使用的是内容部分的背景色，这样就出现一个想要的样式。
兼容性：用的position定位，兼容性你懂的（DEMO中未测试，用于生产需自测）。
比较下
西门大哥的方法并不好实现border同一色的问题，当然如果使用上面的方法也是可以实现的。
最后说明
如果一个页面中用了很多tips箭头，我仍然建议使用图片，减少浏览器的渲染时间，当然似乎要很多很多，才能看出浏览器有卡的效果。
相关资源
另一种实现小箭头的方法：CSS实用小技巧，利用border属性实现一个标签做箭头
在百度知道搜资料的时候看到一个网友问了关于CSS浮动的问题，问题地址在这里，直接看代码:
<body> <div style="background:red; height:100px; width:200px; float:left;">111111111111111</div> <div style="background:grey; height:100px; width:200px;">222222222222222</div> </body>
看了上面代码很简单，相信从理论上你也应该看出会是什么样的一个显示方式。但问题就在于你没想到的地方。看下面的效果：
111111111111111222222222222222
再试试不同的浏览器，我使用的IE和Chrome，可以明显的看出两者的不同之处。为了更明显的看出区别在哪，你可以本地新建一个文档，贴入下面的代码：
<body> <div style="background:red; height:100px; width:200px; float:right;">111111111111111</div> <div style="background:grey; height:100px; width:200px;">222222222222222</div> </body>
然后收到缩小浏览器窗口的宽度，看看两者是怎么个float方式。
之前也没遇见过，当然也可以为第二个div加个float就能解决，但问题在于我没想清楚这样的不兼容到底怎么去解释。不过从理论上IE的渲染结果比较符合我的理解，Chrome的结果有点让我出乎意料。
请问各位高手，如此问题你如何解释？
jQuery插件多如牛毛，jQuery的高手也是随处可见，作为目前主流javascript框架，jQuery已经是无孔不入。咱也跟上时髦，做点特效，自己观赏观赏，并作为以后参考。高手有时间帮忙指导指导，先谢过。
jucelin也是初学者，写这么个小插件用了一个上午的时间，真是会者不难，难者不会。虽说Title提示类插件已经有很多高手写出来了，如张鑫旭的jQuery万能浮动框插件，功能很强大，但就是有些代码还看不懂，所以自己用最简单的方法，自己学习写了个。
再者工作中经常要用到使用表格来显示数据，但苦于界面宽度及页面美观的限制，一些内容只能显示部分，显示全部则用title来显示，可惜的是IE的一个怪毛病，鼠标放上去之后一段时间后显示，显示一段时间后就会消失，如果内容较多，使用者准备仔细阅读时，显示的title就消失了。鉴此需求，写个脚本，应该还算值，原本用在单页面的，在对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插件的基础知识，导致两种方法弄混了，怎么调试都出错，不会走，就想跑了，呵呵，惭愧下。这个插件还是可以继续拓展的，而且效率方面可能也不是最优的，因为我还没学习到这块的内容，以后再看看能不能优化，也希望你能停下脚步，帮俺看看。
下载插件JS：https://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属性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
BUG描述下先：在标签<a>下加入<span>和<img>标签，并将<a>和<span>标签定义为display:block，设定大小，测试发现鼠标放在图片是不会显示手型，图片的链接也“失效”了（其实未失效，下面解释），点击没有任何效果，但点击<a>标签的空白位置，链接依然有效。
下面是专门写的一个测试页面，有兴趣的可以测试下。
<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/
hack技术学的再好, 却无法入侵你的心,服务器入侵的再多,
对你只有guest的权限,是我的ddos造成了你的拒绝服务？
还是我的webshell再次被你的anti-virus防护？
你总有防火墙
我始终停不掉
想提权
无奈jsp+mysql成为我们的障碍
找不到你的注入点 扫不到你的弱口令
所有对我的回应都用了MD5加密
你总是自定文件格式 我永远找不到你的入口点
忽略所有异常 读取内存代码
却还是跟踪不到你的注册码
虽然我们是不同的对象,都有隐私的一面,
但我相信总有一天我会找到你的接口,把我的最真一面给你看!
因为我是你的指针,在茫茫内存的堆栈中, 永远指向你那片天空,不孜不倦!
我愿做你的内联,供你无限次的调用,直到海枯石烂!
我愿做你的引用,和你同进退共生死,一起经受考验!
只是我不愿苦苦地调试你的心情,最终沦为你的友元!
如今我们已被MFC封装–事事变迁!
如今我们已向COM走去–可想当年!
没任何奢求,只愿做你最后的Administrator!
我能抽象出整个世界
但是我不能抽象出你
因为你在我心中是那么的具体
所以我的世界并不完整
我可以重载甚至覆盖这个世界里的任何一种方法
但是我却不能重载对你的思念
也许命中注定了你在我的世界里永远的烙上了静态的属性
而我不慎调用了爱你这个方法
当我义无返顾的把自己作为参数传进这个方法时
我才发现爱上你是一个死循环
它不停的返回对你的思念压入我心里的堆栈
在这无尽的黑夜中
我的内存里已经再也装不下别人
我不停的向系统申请空间
但却捕获一个异常：我爱的人不爱我
为了解决这个异常
我愿意虚拟出最后一点内存
把所有我能实现的方法地址压入堆栈
并且在栈尾压入最后一个方法－将字符串＂我爱你，你爱我吗？＂传递给你．
如果返回值为真－－我将用尽一生去爱你
否则－－我将释放掉所有系统资源．
此文是在h3lpless’ blog看到的，感觉不错，就果断转载过来，娱乐下。先不说写情书的人的HACK技术，就文中的关键字，他也应该不是新手了。同时也看出来此人寂寞了。哈哈
现在的网站到底还需不需要兼容IE6？wordpress宣布将在下一代版本中不再兼容IE6，如此消息相信会让很多中国用户放弃对WP的进一步升级。前几日看到某设计师出售的最新主题，非常不错，唯一不足是不兼容IE6，留言问其原因，得到的回复是放弃对IE6兼容，而其主题在IE6下可谓是错乱不堪，一塌糊涂。
从CNZZ的统计数据来看，IE6在国内的使用率还是第一，如果加上那些穿上马甲的IE6，IE6依然位居榜首。让我很是困惑的是很多的前端设计师都在选择放弃兼容IE6，现在放弃是否是时候？jucelin在设计网站的时候，总是在思考兼容IE6，因为IE6确实是让人蛋疼的事，看到这么多牛人都在放弃IE6，是否也应该响应他们的号召？
实际上我们应该做的还是以用户为主，不应该让用户因为我们而改变，正如QQ和360打架的时候强制要求卸载360的动作让很多用户感到反感一样。这也算是用户体验了吧。
从网站的用户分别出发，对于国内用户，用户的浏览器主要以IE为主，此时IE6的用户应该仍然占主流，对应国外的用户，IE6则早已成过去时，外贸网站则不用考虑兼容IE6了，其他面向国内的，你是否该考虑下。
从网站的主题来看，什么技术类的，计算机专业类的，这些网站的用户基本都会为自己升级浏览器，IE6估计早已成为他们唾弃的对象。其他像什么食谱类的，散文类的，用户还是以普通大众为主，他们是能用就行，因为他们不知道还有更好的，如此一来，也是得考虑兼容了。
如此说来，基本上都得兼容IE6，你还有其他理由不兼容吗？IE9确实是未来的趋势，IE6也正在走向消亡的道路，但路漫漫其修远兮，哥们为你的用户想想吧。一打开网站，就和百度快照一样，还是加了样式的快速版，用户看了早走了。
话说，兼容归兼容，咱有不一定要求在其他浏览器一样的效果，咱至少让IE6用户看到头部导航还在画的圈子里面待着就行。加速IE6消亡的不应该是小网站，应该让大的门户网去做，想想360的软件管家，IE6直接被提示要更新，这样的提示每天可以干掉多少IE6？要是哪天QZONE的右下角提示“升级IE6，看更美的空间”，又会有一大票IE6被升级掉。
确保选择器不是以通用类结束。
如果你有一个选择器是以ID类作为关键选择符，请不要添加多余标签名上去。因为ID是唯一的，你不要为了一个不存在的理由而降低了匹配的效率。
差 – button#backButton { }
差 – .menu-left#newMenuIcon { }
好 – #backButton { }
好 – #newMenuIcon { }
和上一条类似，所有的 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 来选择他们，会比每张图片分开存储，执行效率上高很多。
原文转自css88：http://www.css88.com/archives/402
前几日看到QQ空间发来的邮件，使用一个什么简单的样式，感觉不错就替换了现在模板中自带的评论回复邮件的模板，由于我现在使用的主题是Weisay提供的，评论回复功能在functions.php中自带的，只需简单的替换即可，其他朋友的邮件回复样式可能要到具体的文档找找了。整个代码相当简单，高手记得飘过哦~
先看下面的演示：
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浏览器浏览！
在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浏览器版本。
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,汉字和英文字母在同一平行线了。
这个问题好像也是只在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="" /> 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="" />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="" /> <a href="#">hao123</a></span>
<span><input name="" type="checkbox" value="" /> <a href="#">好123</a></span>
<span><input name="" type="checkbox" value="" /> <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的显示效果：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
因为项目的需求，需要在客户端绘制直线，以达到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的全称是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访问，否则不能看到实例效果)
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
既然在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 的内容，具体是意义，其实也只是证实上一段的内容。
今天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众望所归。
既然上面讨论了不同的浏览器有不同的设计方式，特别是蛋疼的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次，泪奔啊。。。