web标准学习—小辉博客

img的 src 属性为空时尺寸在各浏览器中不一致

admin — Tue, 07 Sep 2010 03:59:26 +0000

img的 src 属性为空时尺寸在各浏览器中不一致，这个问题你会经常的碰到，当img的路径不对的时候（img没有设置边框的时候）你会发现火狐下一片空白而ie下你能看到一个差号就像这个并且它占用的空间是固定的除非你对它设置了宽和高。于是我就在ie下火狐下火chrome下测试了他们，结果是各不相同，下面我就把得出的结论和截图发上来。

	IE	Firefox	Chrome
Height	30px	18px	0px
Width	28px	0px	0px

IE的截图：

Firefox的截图：（火狐3.6.8版本，有点意思不设置边框显示的是0如下图，设置了边框显示的有高度没有宽度）

chrome的截图：

IE6 中最大最小宽度和高度css 高度控制

admin — Tue, 07 Sep 2010 02:44:53 +0000


最小宽度
min-width:200px;width:auto !important;width:200px;
最大宽度
width:auto !important;width:200px;max-width:200px;overflow:hidden;
最小高度
min-height:200px;height:auto !important;height:200px;
最大高度
height:auto !important;height:200px;max-height:200px;overflow:hidden;

jquery简单的列表滚动效果

admin — Mon, 06 Sep 2010 07:25:08 +0000

使用jquery实现一些列表的滚动有很多的方法，你可以使用animate方法，到网上搜到的大都是使用animate方法的，当然也可以使用别的方法，今天我们介绍的这个方法我感觉也比前一种方法更容易理解！思路就是首先获取到列表中的第一个，然后把它隐藏在隐藏的同时克隆一份放到列表容器中，这时候删除这个列表。而这个时候原来的第二条列表就变成第一条了，设置循环就可以一直执行下去。好了用语言描述有时候感觉很不给力，所以还是看例子！

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>滚动新闻</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> function newsScroll(){ $(function(){ $(".newsList li:first").hide('slow',function(){ $(this).clone().appendTo($(this).parent()).show('slow'); $(this).remove(); }); }); }; $(document).ready(function() { var myar = setInterval('newsScroll(".newsList li")', 2000) $(".newsList li").hover(function() { clearInterval(myar); }, function() { myar = setInterval('newsScroll(".newsList li")', 2000) }); }); </script> <style type="text/css"> #box { height:300px; width:300px; margin:0 auto; border:1px solid orange; line-height:2; } ul,li { list-style:none;} .notice { width:500px; margin:10px auto; line-height:1.6; font-size:18px; color:orange;} </style> </head> <body> <div class="notice"> 这中写法很容易理解，并且你可以自己修改切换到方式，比如你可以把show和hide换成fadeIn和fadeOut或者是slideDown和slideUp都可以，自己不会写插件所以就没有封装！ </div> <div id="box"> <ul class="newsList"> <li>web标准学习-www.xh-css.cn</li> <li>web标准学习-www.xh-css.cn</li> <li>web标准学习-www.xh-css.cn</li> <li>web标准学习-www.xh-css.cn</li> <li>web标准学习-www.xh-css.cn</li> <li>web标准学习-www.xh-css.cn</li> <li>web标准学习-www.xh-css.cn</li> <li>web标准学习-www.xh-css.cn</li> </ul> </div> </body> </html>

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

你还可以把show和hide换成fadeIn和fadeOut或者是slideDown和slideUp都可以，自己动手试试吧。

UTF-8编码下导致的空行问题

admin — Sun, 05 Sep 2010 09:27:50 +0000

UTF-8签名(UTF-8 signature)也叫做BOM(Byte Order Mark)，是UTF编码方案里用于标识编码的标准标记。
如果多个文件设置了签名，在二进制流中就会包含多个UTF-8签名，而IE是无法识别多个UTF-8签名的，所以用一个空行来代替，在某些程序处理中还会出现一个类似“诺”的字符。

在UCS 编码中有一个叫做”ZERO WIDTH NO-BREAK SPACE”的字符，它的编码是 FEFF。而FFFE在UCS中是不存在的字符，所以不应该出现在实际传输中。UCS规范建议我们在传输字节流前，先传输字符”ZERO WIDTH NO-BREAK SPACE”。这样如果接收者收到FEFF，就表明这个字节流是Big-Endian的；如果收到FFFE，就表明这个字节流是Little- Endian的。

因此字符[ZERO WIDTH NO-BREAK SPACE]又被称作BOM。
详情: W3C官方关于这个问题的说明

解决方法：
去掉UTF-8文件的签名，EditPlus和Dreamweaver中均有相应的选项。

以EditPlus为例：
进入 Tools->Preferences->Files，在UTF-8 signature选项中选择“Always remove signature”，重新保存文件即可。

如果模板采用包含的方法包含多个utf8文件需要用ultraedit保存时另存为功能，选择utf8 无bom格式保存即可。

另外，如果中文页面在html head标记中将title标记放在前面会导致页面空白。
所以utf8页面应该使用标准顺序