WebDev

CSS Sprites样式生成工具

2009-12-14 23:24 | Posted by Sunshow | Filed Under Software, WebDev

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

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

使用效果图：

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

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

小工具：中国地图染色

2009-05-15 16:41 | Posted by Sunshow | Filed Under WebDev

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

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

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

效果如下图：
chinesemap

标签：GIS, 中国, 地图

有时候注释也不能乱写

2009-02-21 17:11 | Posted by Sunshow | Filed Under WebDev

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

<!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，发生了什么：
IE6下的运行效果

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

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

再次呼吁抛弃IE6！

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

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

相关日志

Permalink | Trackback | 1 Response

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

2009-02-21 14:54 | Posted by Sunshow | Filed Under WebDev

我都不知道什么时候开始就有这个问题了，我记得以前是没问题的……
症状很简单，写一行最简单的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可能也会有此问题

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