Sunshow Life » WebDev

CSS Sprites样式生成工具

Sunshow — Mon, 14 Dec 2009 15:24:21 +0000

推荐一个CSS Sprites样式生成工具
作者主页：http://www.cssforest.org/blog/index.php?id=129

这是一个基于Adobe AIR的工具，需要下载AIR运行时

使用效果图：

操作说明：
载入图片后，双击新增一个区域，设置每个区域的类名等属性，最后可以导出css列表
更多说明可以参考主页内容

标签：adobe, AIR, css, sprite, 下载, 列表, 图片, 样式

相关日志

小工具：中国地图染色

Sunshow — Fri, 15 May 2009 08:41:51 +0000

需求来源于领导想要一个地区分布的图，据说GIS术语叫专题图

在网上搜到一个现成能用的，点这里

然后我包装了一小下，点这里

效果如下图：

标签：GIS, 中国, 地图

相关日志

有时候注释也不能乱写

Sunshow — Sat, 21 Feb 2009 09:11:23 +0000

让我们看看这个很简单的例子：

<!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>
<title>title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#body {
margin: 0 auto;
width: 400px;
height: 200px;
background: #eee;
}
#left {
float: left;
width: 100px;
background: red;
height: 200px;
}
#center {
float: left;
width: 200px;
background: blue;
height: 200px;
}
#right {
float: left;
width: 100px;
background: green;
height: 200px;
}
style>
head>
<body>
<div id="body">
<div id="left">div>
<div id="center">div>
<div id="right">div>
<div style="clear: both;">div>
div>
body>
html>

尝试分别在各种浏览器下运行它：

<!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> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #body { margin: 0 auto; width: 400px; height: 200px; background: #eee; } #left { float: left; width: 100px; background: red; height: 200px; } #center { float: left; width: 200px; background: blue; height: 200px; } #right { float: left; width: 100px; background: green; height: 200px; } </style> </head> <body> <div id="body"> <div id="left"></div> <div id="center"></div> <div id="right"></div> <div style="clear: both;"></div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

在大多数情况下，我们得到了正确的预期中的结果，如下图所示：

但是不要忘了神一般的IE6，OMG，发生了什么：

经过我一个像素一个像素的测量，发现当其中一个div减少3px的时候，在IE6下就能并排显示
这个数值很容易让人想到The IE6 Three Pixel Gap，但也不是这个问题，真正的原因在于那句注释，将注释去掉就能在IE6下也得到正确的结果

有时候嵌套过多时，我们为了方便地找到嵌套的首位，会比较习惯于在开始和结束的地方加上注释，这时候如果碰到float就要慎重了，我测试了将注释换行或者加上空行分隔，都不能解决此问题

再次呼吁抛弃IE6！

另外还有css和js文件的注释，最好写英文注释，当然最好的习惯是将所有文件保存为统一编码
我碰到的几次问题是utf8的html引入编码为ansi的js文件，结果由于字符集的问题导致js中的单行(即//开头的注释)中文注释不能正确断行，导致下一行本应执行的语句被注释掉，由此可以推出一个好的编码习惯，即在单行注释末尾也加分号

标签：css, html, ie, 注释, 编码

相关日志

允许本地文件系统上的 HTML 页访问脚本

Sunshow — Sat, 21 Feb 2009 06:54:57 +0000

我都不知道什么时候开始就有这个问题了，我记得以前是没问题的……
症状很简单，写一行最简单的javascript代码，例如“alert(1);”，保存成.js文件
接着在一个html文件中用script标签引入该js，在IE7下打开始终提示无效字符，简直让我抓狂了
（最诡异的事情是有时候改个文件名又能执行，有的文件名又不行，见鬼）

于是分析问题，用IETester的IE6标签打开，一切正常
放到webserver下通过http访问，也正常
这样基本可以确定是本地安全策略的问题

把Internet选项的安全设置本地设为低，再打开之前的文件，竟然……还不行

最后搜到了微软的官方说明（据说是机器翻译，可读性还挺不错）：

Internet Explorer 7
如果使用 Internet Explorer 7 时遇到此问题，请按照下列步骤：

1. 单击开始，单击运行，在打开的框中键入 Regedit ，然后单击确定。
2. 找到下面的注册表项，并单击下面的注册表项：
HKEY_LOCAL_MACHINESOFTWAREMicrosoftInternet ExplorerMainFeatureControlFEATURE_BLOCK_LMZ_SCRIPT（注：这个项默认似乎没有，得自己建立）
3. 在编辑菜单上指向新建，然后单击 DWORD 值。
4. 在 DWORD 值框中，键入 iexplore.exe ，，然后再按 Enter。
5. 双击在步骤 4 中创建 iexplore.exe 注册表项。
6. 在在数值数据框中键入 0 ，然后单击确定。
7. 退出注册表编辑器。

按照文中的说明，Windows Server 2003 Service Pack 2 中的 Internet Explorer 6可能也会有此问题

问题解决了，不过我还是纳闷以前怎么没碰到过这个问题，难道是最近的安全更新才有的？

标签：html, ie, javascript, 安全, 微软, 脚本, 运行

相关日志

一个布局的模型

Sunshow — Thu, 19 Feb 2009 13:05:12 +0000

代码还比较ugly，不过思路应该还可以，理论上支持无限级的区域划分

layout demo

扩展性应该也还好，随便加了一个收缩/展开的功能发现还是比较轻松的

标签：javascript, layout, 布局

相关日志

IE和Firefox对换行的不同处理

Sunshow — Tue, 20 Jan 2009 06:36:02 +0000

其实题目不太确切，应该是对回车(Return，即r)换行(New line，即n)的不同处理

看示例就明白了：

<!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> <title></title> <script type="text/javascript">  </script> </head> <body> <div id="test"> <pre> line 1 line 2 line 3 line 4 </pre> </div> <button type="button" onclick="removeLineBreaksIE();">Remove line breaks for IE!</button> <button type="button" onclick="removeLineBreaksFx();">Remove line breaks for Firefox!</button> </body> </html>

提示：你可以先修改部分代码再运行。

其中pre的部分参考上一篇文章

标签：firefox, ie, 换行

相关日志

IE、pre、innerHTML

Sunshow — Wed, 14 Jan 2009 05:54:05 +0000

先来看个很简单的例子：

提示：你可以先修改部分代码再运行。

分别在IE和Firefox下运行会得到不同的结果，看代码会发现实际上只是执行了一条看起来是无意义的操作(这里只是举例子)：

var pre = document.getElementById('preTest');
pre.innerHTML = pre.innerHTML;

搜啊搜，终于找到了对此问题的描述：

IE applies HTML normalization to the data that is assigned to the innerHTML property. This causes incorrect display of whitespace in elements that ought to preserve formatting, such as

 and </div></div>
<p>知道原因了还是不知道怎么解决，单纯针对pre标签的话，可以连pre标签一块替掉，或者再包一层pre，如下：</p>
<div class="hl-surround"><div class="hl-main"><span style="color: Green;">var</span><span style="color: Gray;"> </span><span style="color: Blue;">pre</span><span style="color: Gray;"> = </span><span style="color: Teal;">document</span><span style="color: Gray;">.</span><span style="color: Blue;">getElementById</span><span style="color: Olive;">(</span><span style="color: #8b0000;">'</span><span style="color: Red;">preTest</span><span style="color: #8b0000;">'</span><span style="color: Olive;">)</span><span style="color: Gray;">;<br /></span><span style="color: Blue;">pre</span><span style="color: Gray;">.</span><span style="color: Blue;">innerHTML</span><span style="color: Gray;"> = </span><span style="color: #8b0000;">'</span><span style="color: Red;"><pre></span><span style="color: #8b0000;">'</span><span style="color: Gray;"> + </span><span style="color: Blue;">pre</span><span style="color: Gray;">.</span><span style="color: Blue;">innerHTML</span><span style="color: Gray;"> + </span><span style="color: #8b0000;">'</span><span style="color: Red;"></pre></span><span style="color: #8b0000;">'</span><span style="color: Gray;">;</span></div></div>
<p>查看演示，textarea也可以用类似的思路解决：</p>
<div class="runcode">
<p><textarea name="runcode" class="runcode_text" id="runcode_rKplFI">
<!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>
<title>innerHTML Test</title>
<script type="text/javascript">
<!--
function doPreTest() {
	var pre = document.getElementById('preTest');
	pre.innerHTML = '<pre>' + pre.innerHTML + '</pre>';
}
//-->
</script>
</head>
<body>
<pre id="preTest">
1. first line.
2. second line.
3. third line.
</pre>
<button type="button" onclick="doPreTest()">点我</button>
</body>
</html>

  提示：你可以先修改部分代码再运行。

标签：ie, innerHTML, javascript, pre

相关日志

栅格系统

Sunshow — Tue, 13 Jan 2009 08:09:46 +0000

第一次听说这个概念
我又过时了
下次设计网页的时候试试

标签：栅格, 网页, 设计

相关日志

克服懒惰

Sunshow — Mon, 12 Jan 2009 15:31:23 +0000

昨天开始为了实现如图所示的一个图片滚动效果，试了YUI和jQuery的几个插件，折腾了好几个小时都没有搞定
最后自己动手从头写了一个，只花了十几分钟

克服懒惰，有些事情其实没那么难

标签：图片, 懒惰, 滚动

相关日志

IE Web Developer

Sunshow — Wed, 10 Dec 2008 04:17:11 +0000

今天后知后觉的看见了这个东西
要比IE Developer Toolbar好用，不过是收费的
不过想想IE的痛苦，咱们找个破解的用就是了

于是我也能在IE下用console.log了，好欣慰……
虽然没有firebug强大，不过我已经很满足了
推荐给大家：http://www.piaodown.com/soft/2718.htm

标签：develop, firebug, ie, web

相关日志

看上去不错的日期控件

Sunshow — Tue, 25 Nov 2008 13:58:10 +0000

演示地址：http://www.my97.net/dp/demo/index.htm

文档很详细，而且是中文的

标签：calendar, javascript, 控件, 日期

相关日志

IE中li显示高度的bug

Sunshow — Thu, 23 Oct 2008 06:25:27 +0000

具体表现为：
当li内嵌套其他容器时，在IE下实际占用的高度(offsetHeight)会比内嵌容器的高度多出几像素，而且多出来的像素数在IE6和IE7下似乎还不太一样
此时li的样式：

解决方法也很简单，只要添加float即可，在我的应用中还加了宽度，等于是变相实现了display:block的效果：

参考文章：http://www.css88.com/article.asp?id=427

标签：bug, ie, li, 高度

相关日志

IE显示overflow的bug

Sunshow — Thu, 16 Oct 2008 07:27:32 +0000

具体问题表现和解决办法：
http://rowanw.com/bugs/overflow_relative.htm

此问题在IE6和IE7下都存在

标签：bug, ie, overflow, relative

相关日志

IE6显示1px高度的bug

Sunshow — Mon, 13 Oct 2008 05:52:57 +0000

在IE6下运行以下代码测试：

<!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> <TITLE> New Document </TITLE> </HEAD> <body> <div id="test" style="font-size: 1px; height: 1px; line-height: 1px; margin: 0 1px;background: #333"> </div> </body> </HTML> <script type="text/javascript">  </script>

提示：你可以先修改部分代码再运行。

得到结果是2，在其他浏览器下得到的都是预期的1，经过测试发现只要删除背景色属性就正常
这实在是个匪夷所思的问题

最后经新软群中hyne大大提醒，在div中加入一个就能解决(注：直接空格不行)，即：

<div id="test" style="font-size: 1px; height: 1px; line-height: 1px; margin: 0 1px;background: #333">
div>

本来以为自己已经把IE6的各种问题触碰的差不多了，竟然还有新的……

标签：bug, ie, 背景, 高度

相关日志

JavaScript Templates - TrimPath

Sunshow — Wed, 10 Sep 2008 12:24:09 +0000

准备用JS模板来开发，使用这个：
http://code.google.com/p/trimpath/wiki/JavaScriptTemplates

Online Demo

题外话：今天偶然看了自己的访客统计，Firefox3的用户竟然和IE6的在伯仲之间，都在30%左右，大跌眼镜

标签：javascript, 模板

相关日志

记录一个歪招

Sunshow — Sat, 23 Aug 2008 01:36:38 +0000

事情是这样的，一个很复杂的页面，放在特殊的程序中使用，无法使用firebug等工具进行调试
结果有一块本应是可点击的区域死活不知道被什么东西挡住点击不了
测试发现将所处容器设置一个背景色就能点击了，大约是IE透明背景的bug

实在懒得深究了，最后的解决办法是：
用Photoshop做了个1px*1px的透明小图片，并将其设为背景，于是OK了

标签：图片, 背景, 透明

相关日志

利用数组提高IE拼接字符串效率

Sunshow — Thu, 31 Jul 2008 12:13:55 +0000

今天终于静下心来研究程序的效率问题，竟然发现一个普通的循环拼接字符串在IE下竟然执行了3秒钟时间
搜索发现早就有人对此进行了研究，于是又学到了一招，就是利用数组的join方法
以后得注意着这个问题，当需要拼接的字符串比较多的时候使用如下方法：

function StringBuffer(){
this._strings = new Array();
}
StringBuffer.prototype.append = function(str){
this._strings.push(str);
};
StringBuffer.prototype.toString = function(){
var str = arguments.length == 0 ? '' : arguments[0];
return this._strings.join(str);
};
//示例
var buffer = new StringBuffer();
buffer.append('This is ');
buffer.append('an ');
buffer.append('example!');
alert(buffer.toString());

在我的代码上实际使用时，原来需要执行3秒多的代码只要600多毫秒就搞定了，一举解决了速度问题
另外arguments对象可以在某些场合派上用场

标签：ie, javascript, join, 字符串, 拼接, 效率, 数组

相关日志

计算element相对于父容器的偏移量

Sunshow — Mon, 14 Jul 2008 14:25:47 +0000

如果没有提供parentId参数，则计算相对于给定element的最顶层容器的偏移量
特别需要注意的是，这里所指的父级容器，是指最近的一个有定位的元素，意即设置了position属性为absolute或者relative的

function getOffsetXY(elementId, parentId){
var element = document.getElementById(elementId);
var element_X = element.offsetLeft;
var element_Y = element.offsetTop;
while (true) {
if ((!element.offsetParent) || (!element.offsetParent.style) || (!!parentId && element.offsetParent.id == parentId)) {
break;
}
element_X += element.offsetParent.offsetLeft;
element_Y += element.offsetParent.offsetTop;
element = element.offsetParent;
}
//element_X = element_X - document.body.scrollLeft;
//element_Y = element_Y - document.body.scrollTop;
return {
x: element_X,
y: element_Y
};
}

标签：absolute, javascript, offset, parent, position, relative, 偏移, 定位, 容器

相关日志

IE6用Javascript提交表单的问题

Sunshow — Fri, 30 May 2008 06:35:31 +0000

最近做网站，把IE6能碰到的问题基本碰了个遍，今天又碰到JS提交表单页面不刷新的问题

因为要用图片做按钮来提交表单，所以使用了如下代码：

然后css去定义背景什么的，这些略掉

结果在IE6下点提交页面不跳转，折腾的时候又发现有些情况表单实际上已经提交了只是页面没有跳转
看到有人说应该使用setTimeout来提交，经过测试还是不行，根本就没有执行setTimeout里面的方法

最后查到是javascript:void(0)的问题，在IE6中当href="javascript:void(0)"时是有可能中止当前的js操作的，
改成href="#"，页面就跳转了(虽然还是有点小问题，就是先更改页面焦点到"#"然后才提交)

当然这个问题可以直接使用div等其他容器的onclick来实现应该就行了，没必要使用a这个超链接标签

标签：ie, javascript, 提交, 表单, 跳转, 页面

相关日志

一个完整的表格样式

Sunshow — Thu, 24 Apr 2008 02:51:12 +0000

一坨针对IE的HACK

table.default {
background: #C1DCF7 none repeat scroll 0%;
border: 1px solid #C1DCF7;
color: #000000;
width: 98%;
border-collapse: collapse;
margin: 0 auto;
}
table.default caption {
background:transparent url(http://blog.sunshow.net/wp-content/uploads/2008/04/bg_list.gif) repeat-x scroll 0%;
height: 30px !important;
line-height: 30px;
text-align: left;
padding-left: 10px;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
}
table.default caption a:link, table.default caption a:visited {
color: #000000;
font-size: 12px;
text-decoration: underline;
}
table.default caption a:hover {
font-size: 12px;
color: #14568A;
}
table.default thead tr {
background: #C1DCF7 none repeat scroll 0%;
color: #000000;
height: 25px;
line-height: 25px;
text-align: center;
font-size: 13px;
}
table.default thead tr th {
border-color: #C1DCF7; /* fix for IE */
}
table.default tbody {
background: #FFFFFF none repeat scroll 0%;
text-align: left;
}
table.default tbody tr {
height: 25px;
line-height: 25px;
event: expression(
(this.onmouseover = function() {this.className += ' over';}) &&
(this.onmouseout = function() {this.className = this.className.replace(' over', '');})
);
}
table.default tbody tr:hover, table.default tbody tr.over {
background-color: #E8F0FF;
}
table.default tbody tr td {
font-size: 12px;
padding: 0 0 0 5px;
border-color: #C1DCF7; /* fix for IE */
}
table.default tbody tr td { /* fix for IE when align="center" or align="right" */
padding-left: expression(
(((this.align == 'center') || (this.align == 'right')) ? '0px' : '5px')
);
padding-right: expression(
((this.align == 'right') ? '5px' : '0px')
);
}
table.default tbody tr td[align="center"] {
padding: 0;
}
table.default tbody tr td[align="right"] {
padding: 0 5px 0 0;
}

效果展示：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CSS Test</title> <style type="text/css"> table.default { background: #C1DCF7 none repeat scroll 0%; border: 1px solid #C1DCF7; color: #000000; width: 98%; border-collapse: collapse; margin: 0 auto; } table.default caption { background:transparent url(http://blog.sunshow.net/wp-content/uploads/2008/04/bg_list.gif) repeat-x scroll 0%; height: 30px !important; line-height: 30px; text-align: left; padding-left: 10px; font-size: 14px; font-weight: bold; color: #FFFFFF; } table.default caption a:link, table.default caption a:visited { color: #000000; font-size: 12px; text-decoration: underline; } table.default caption a:hover { font-size: 12px; color: #14568A; } table.default thead tr { background: #C1DCF7 none repeat scroll 0%; color: #000000; height: 25px; line-height: 25px; text-align: center; font-size: 13px; } table.default thead tr th { border-color: #C1DCF7; /* fix for IE */ } table.default tbody { background: #FFFFFF none repeat scroll 0%; text-align: left; } table.default tbody tr { height: 25px; line-height: 25px; event: expression( (this.onmouseover = function() {this.className += ' over';}) && (this.onmouseout = function() {this.className = this.className.replace(' over', '');}) ); } table.default tbody tr:hover, table.default tbody tr.over { background-color: #E8F0FF; } table.default tbody tr td { font-size: 12px; padding: 0 0 0 5px; border-color: #C1DCF7; /* fix for IE */ } table.default tbody tr td { /* fix for IE when align="center" or align="right" */ padding-left: expression( (((this.align == 'center') || (this.align == 'right')) ? '0px' : '5px') ); padding-right: expression( ((this.align == 'right') ? '5px' : '0px') ); } table.default tbody tr td[align="center"] { padding: 0; } table.default tbody tr td[align="right"] { padding: 0 5px 0 0; } </style> </head> <body> 表格样例 <table class="default" cellpadding="1" cellspacing="0" rules="all"> <caption>我是标题</caption> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> </thead> <tbody> <tr> <td>左对齐</td> <td align="center">居中</td> <td align="right">右对齐</td> </tr> <tr> <td>测试1</td> <td align="center">测试2</td> <td align="right">测试3</td> </tr> </tbody> </table> </body> </html>

提示：你可以先修改部分代码再运行。

标签：css, ie, 表格

相关日志