网上的对话框类多得不得了，“art.dialog”有什么优势？ 身材娇小：js压缩后只有4KB多，一张背景图229字节，css文件4KB多。 兼容性强：兼容主流浏览器，视觉效果完全一致（包括IE6无抖动静止）。 自适应内容：对话框可自适应内容大小，无需设置高度与宽度；智能文本对齐。 灵活：CSS钩子机制可任意写入类；对话框弹出位置完全可控。 不错的用户体验：可拖动，不会拖出可视范围；有锁屏功能，防止误操作；ESC键可关闭对话框。 还等什么？赶快预览：http://www.planeart.cn/downs/artDialog/

半夜三更抱着电脑在床上写这篇文章，起因是我之前下载了很多网上的javascript弹出层类，几乎没有一个让我满意。要么就功能不完善，无法满足基本应用；要么就是设计过度，无法二次开发（连编写风格都困难）。 弹出层大多运用在交互比较频繁的网站中，如FaceBook，校内，开心，163Mail等，它取代了浏览器自带的警告提示和模态窗口，具有更好的易用性。它让web如桌面软件一样易用。

逛网站的时候发现一个会‘呼吸’的图片，乍一看以为是flash做的。网站地址：dragoninteractive 后来才知道它是基于jquery与CSS结合制作的效果，代码很少，顿时被作者的创意折服。 一、先学习下 HTML代码： <a id=”logotype” href=”#”></a> CSS代码： a#logotype { background: url(logotype.jpg) no-repeat top left; display: block; position: relative; height: 70px; width: 119px; text-indent:-999em; overflow:hidden; } a#logotype .hover { background: url(logotype.jpg) no-repeat bottom left; display: block; position: absolute; top: 0; left: 0; height: 70px; width: 119px; } 上面有个.hover类，是用jquery生成的，javascript代码： $(function() { var fadeSpeed = ($.browser.safari ? [...]

由于项目需要，我不得不把页面各种交互元素“封装”好，以便统一管理这些样式。这是其中一个选项卡圆角导航，兼容主流浏览器，高度宽度都能自适应。 优点 兼容：IE5.5\IE6\IE7\IE8\..,FireFox,Chrome,Opera,Safari。 可适应文字大小：当火狐等浏览器开启“仅缩放文本”，使用缩放文本功能，这个选项卡图形同样保持比例，照顾视力不好的用户。

昨天一个朋友来腾讯面试，他们进行了一道网站重构的测试( 可以查看我另外一篇相关的文章： http://www.planeart.cn/?p=443 )，大致要求如下： 上面只是一个简化图，实际比这个复杂不少：Left与Right是固定宽度，中间Main要求自适应，核心问题是Html文档流必须从Main开始然后才是两侧，下面就是这个要求的Html结构 <div id=”main”> </div> <div id=”left”> </div> <div id=”right”> </div> 常规做法把两侧放在主要内容的前面进行左右浮动，然后中间使用边距，这样有个缺点就是网速慢的时候主要内容却在最后显示。

本来是一张普通的图片，当它在鼠标靠近的时候它显示出了玻璃特有的高光效果，经过修饰后使原本平淡的图片顿时变得有趣起来，它却没有用复杂的JavaScrpit脚本，完全用CSS实现的。 在线演示：http://www.planeart.cn/downs/glassCss/demo.html 打包下载：http://www.planeart.cn/downs/glassCss/glassCss.rar 这个效果主要是运用了Png图片的支持阿尔法通道特性以及css动态伪类:hover。玻璃遮罩是一个带有半透明的png图片背景的层，通过:hover显示出来。

一、在实现圆角的各种方法中（包括javascript的方法），无非有三种原理： 使用背景图，如css滑动门技术：复杂，圆角平滑，通杀所有浏览器 使用html标签画像素的方式绘制圆角：复杂，圆角不平滑，不能很好的支持圆角内的背景，通杀所有浏览器（本博客的圆角暂时还是这个原理） 使用支持圆角的浏览器私有属性定义圆角：简单，圆角平滑，浏览器支持有限 二、解决IE6 下对png图片半透明效果方法中，大多数只采取了一种原理（包括使用各种脚本的）： 使用IE的私有属性‘滤镜’实现。但这种方法不能使用CSS的“background-position” 和 “background-repeat” 属性，且png背景之上的链接和按钮可能会失效 会发现，上文说说的解决方案都是针对ie的‘虚弱’，其他现代浏览器早就没有这些问题，如火狐浏览器等。下面介绍’DD_roundies‘，通过使用VML来解决问题，它可以让IE低版本浏览器支持圆角和完美的支持PNG。 定义圆角非常简单，平滑，支持圆角内的背景 绝对完美的支持png，他支持CSS的“background-position” 和 “background-repeat” 属性，这个是你手写的css永远滤镜无法达到的。 好了，我仅作介绍，DD_roundies更专业的特性说明和使用方法在官方网站中：http://www.dillerdesign.com/experiment/DD_roundies/

现在国内IE5.5几乎没有几家网站支持了（少数门户网站除外），甚至很多国外网站都逐渐放弃了对IE6和IE6更低浏览器的的支持。 对于一个前端页面制作者来说，我们应该尽可能的考虑到更多的用户与设备。我们没有权利拒绝用户使用IE6和更低的浏览器，但我们可以放弃这些用户更好的浏览体验，至少让这些用户能看到一个简洁的“裸奔”页面，而不是因为出现错位或者javascript错误干扰用户阅读。 如何让IE低版本的浏览器裸奔？ 很多人可能会想到使用IE专用的条件注释，但是条件注释并不被火狐等非IE浏览器支持，所以那些非IE的浏览器也跟着裸奔了！ 我采用一种新的注释套嵌的方法： <!–[if IE]><![if gte IE 6]><![endif]–> <!–显示火狐等非IE浏览器、IE6或之上的版本的css和javascript–> <!–[if IE]><![endif]><![endif]–> 原理： 条件注释分为两种形式 一、IE普通的条件注释，如： <!–[if lte IE 6]>[内容]<![endif]–> 这种形式的条件注释在非IE浏览器解析成普通注释，包裹的内容非IE浏览器不执行。 二、非标准注释的条件注释，如： <![if gte IE 6]>[内容]<![endif]> 这种形式的条件注释包裹的内容却能被IE6+和火狐等现代浏览器执行，而IE也能对其执行条件判断。 第二种条件注释其实已经达到我们需要的效果，但是这个却并非标准的HTML注释，不能通过W3C校验。为了防止以后出现问题我把这两种注释套嵌起来，于是就是文章开头所推荐的方法了。 关于条件判断释义： if lte：低于或等于 if：如果 if !：如果不是 if lt：如果低于 if gte：高于或等于 注意： 条件注释是HTML注释的形式存在，所以只能写在HTML文档里面而不能写在CSS或者JavaScript里面！ 作者的个人网站演示(可以使用IETester查看页面在IE5.5的效 果)：http://www.planeArt.cn 原创文章，转载请保留原始地址:http://www.planeart.cn/archives/227

昨天在做WordPress主题的时候发现了火狐浏览器的静止定位（position:fixed;）在div背景属性设置为滚动静止（background-attachment:fixed）+滚动条自动（overflow:auto）的时候，静止定位元素会在拖动页面的时产生大幅度的抖动现象。最小牺牲的解决方案是去掉“overflow:auto”。 这个BUG比较触发条件较为复杂，含有以上css属性的元素不同的搭配也会让bug效果不同。 BUG演示（在火狐浏览器下运行，我用的是3.5版本）：

很多时候长文本不能自动换行，文本经常把页面撑开，比如在文章中插入代码框：在IE下强制换行可以使用”word-wrap:break-word“，而火狐却不支持这个属性，很多人为了界面整洁直接使用了”overflow:hidden“隐藏了过长的文本，这是极其错误的，使得用户不能阅读与复制文本！试问：对于用户而言，究竟是内容重要，还是界面重要?所以做界面设计的不能太自恋啊…… 当然也有些朋友使用”overflow:auto“，文本过长的时候将自动出现滚动条，如果页面上出现很多滚动条那界面就惨不忍睹了。 怎么样才能两全其美呢?那就只让用户阅读的时候才出现滚动条把！ pre code { word-wrap:break-word;/*IE：强制文本换行*/ overflow:hidden;/*火狐：默认隐藏超出文本*/ } pre code:hover { overflow:auto;/*火狐：用户鼠标靠近时才出现滚动条*/ } 原创文章，转载请保留本文链接地址:http://www.planeart.cn/blog/?p=87