ie6 ie7 效果图 错误

firefox ie8效果图 正确

如上面的图一样，对比一下你会发现右边标题的地方 往下移了 10个像素左右，但是我并没有设置它的margin-top啊，这10个像素左右的位移从哪里来的？ 我发现只要是块元素才会这样，如果是a标签，或者内联元素，就不会了。那我把h3直接改成 inline 元素，应该就可以了啊，但还是没有解决这个问题。。。。h3自带的边距已经清零了。。最后，竟然是因为

Read the rest of this entry »

loading空间占用百分比 CSS制作，这个有人也会用于页面加载时候使用。

比较常用于推荐，等级，满意度调查之类的
Read the rest of this entry »

平常我们习惯了滚动条在右边，如果把滚动条突然放在左边，相信用户一定不会习惯的。。但是假如你的导航菜单是在左边，你的内容又很长需要滚动，那这个时候左边的滚动条就可以派上用场了。用户只需要移动很小的距离就可以拉动滚动条。

假如你的分辨率是1366*768，菜单在左栏，宽度200px，那么如果你鼠标移到滚动条位置拖动就得移动 1166个像素，而在左边的话，你只需要移动200个像素不到。。我们很多内容都在中间，也就是200px后，那鼠标经常活动的位置也是这么一小块地方，你说是从左边近还是右边近呢？

Read the rest of this entry »

还没写过这么长的标题，browser sandbox全名叫Xenocode Browser Sandbox，看到这个标题有点兴奋，当我今天在搜手机模拟器测试的时候，无意中发现了这么一个东西，当你搜索 Xenocode Browser Sandbox 的时候，你就会发现有很多关于这个软件的介绍，但总感觉只是写手 用来宣传的广告语，不知道是不是真的有用，是不是他们有钱收的。。不过可以肯定的是，我写这篇文章我是没钱收。哈哈 ，好了，废话不多说了，进入正题吧。

以前我会想，如果一个系统可以同时装ie6, ie7, ie8，firefox2, firefox3, firefox3.5, safari3, safari4, chrome , opera10, opera9,那就好了，虽然现在也有很多方法来解决浏览器的兼容性测试，但是就我目前的了解情况，这样得装好多个虚拟机来测试，这样是一点都不方便，像ie6 ie7 ie8 虽然有 ietest 还有其它工具来帮助测试，可是偶尔还有些差异，明明ietest没有问题，在别人的ie6 或者ie8下，却出现错乱，当然这个不能全怨浏览器，自己本身的代码写法可能也有问题，写得好的xhtml是很少出现兼容问题的，因为他们了解浏览器的各个bug，ie三个解决了，firefox呢？firefox几个版本怎么共存？用绿化版的？ok，opera呢？safari呢？chrome呢？从官方下载的chrome目前采用自动更新的，应该就是防止出现多版本共存的情况的。我以前试过最多装的测试浏览器有7个，真的已经挺多了，没想到还可以装得更多，现在这种想法终于不是空想了，是的，真的可以，上面提到的浏览器通通可以兼容，通通可以在一个系统打开而不影响目前的系统环境。

东西真的是个好东西，对于我们在web前端做页面构建重构这一块工作的人来说，但是你会发现打开官网，就只有几个浏览器在那里，也没有教你怎么做，啥文档也没有，我看了大半天，好不容易把安装程序弄下来，差点没搞懂怎么用，所以才想写篇文章写给跟我一样迷茫的页面构建者，希望能有点帮助。欢迎拍砖反馈使用效果。

Read the rest of this entry »

我们在看一篇篇幅很长的文章的时候，当我们拖动滚动条，文字向上滚动，背景也跟着变动，新的区域不断出现让我们的视觉感觉到疲劳，有的时候看着看着还会把视觉跳到下面一段去了，为了防止这种情况发生，我们可以把下面的文字先隐藏掉，让读者只需要拖动滚动条就可以逐渐看到隐藏的文字，而背景是固定的，这样可视区域就只是那一个位置，不会一直变换，这样就可以减少些视觉疲劳了，这对于一个经常在网上泡的人很有帮助的。实现这个效果其实很简单，只需要一张图片就能轻松实现。

关键代码

<style>
	body {background:#333333 url(bg.jpg) repeat-x;background-attachment:fixed;color:#333333}
</style>

Read the rest of this entry »