超过宽度显示省略号（无js全兼容）
日期：2009-03-22 | 分类：CSS
曾经发表过《我看超过部分自动隐藏或显示省略号》，表达了用 CSS 处理“超过宽度显示省略号”不合适的一些观点，然而前段时间在逛蓝色理想经典论坛的时候，发现了一种用 CSS 处理此问题的不错的办法，似乎反驳了我的观点，作者[14px ]突破了传统，以“范围底线”为思路创造了一种更好的办法，具体的思路请看以下的详细分析：
思路：
我们要达到的效果是：当“字符超过额定宽度”，则“显示三个小点”。
1、当“字符超过额定宽度”，对于页面来说可能发生的一个改变就是：换行！
2、换行将导致该范围的底线降低。
3、那么，我们的目的则可以换算成：该范围的底线降低时显示三个小点。
图片说明：
上图是经过我（即29楼的“xfcmamb”）的优化之后，作者发布的第二个方案，要看作者的第一个方案及我第二次优化的方案请点击下面相应的链接：
1、原作者的方案：
http://bbs.blueidea.com/thread-2915238-1-2.html
2、第二次优化的方案：
http://bbs.blueidea.com/thread-2916138-1-1.html
在目前我所知道的方法中，我认为这种方法是最好的方法，但缺点还是有的，比如：
要更具具体的行高制作合适的背景图片，也就是说如果图片做的不合适，“省略号”的显示位置可能会不合理。
如果您有什么观点或更好的办法，欢迎发表留言。
网页版"Firebug"
日期：2009-03-9 | 分类：前端技术
Firebug 可以说是 FF 最强大的插件之一，它不但可以查看 xhtml 代码、CSS 代码、JS 代码、DOM 结构，还可以临时修改这些代码，是开发不可缺少的利器。这也许您早已知道，但网页版的 "Firebug" 你听说吗？其实也不是 Firebug 了，而是类似于 Firebug ，功能也没有真正的 Firebug 那么强大，仅可以用来查看网页 DOM 结构和一些 CSS 样式。虽然功能不多，但在某些情况下、某些时候已经够了，特别值得一提的是：它可以在多种浏览器：IE 、FF 、Chrome 中正常运行，除了 Opera ，所以在某些时候还是用的上滴。看看效果吧：
那这东西在哪呢？下面的代码就是了：
%20var%20scriptElem%20=%20document.createElement('SCRIPT');
%20scriptElem.setAttribute('language',%20'JavaScript');
%20scriptElem.setAttribute('src',%20scriptURL);
%20document.body.appendChild(scriptElem);}
loadScript('http://westciv.com/xray/thexray.js');
用法：
1、复制上面的代码（并把它改成一行，我把它换行是为了防止代码过长而自动隐藏了）；
2、打开个网页，等它加载完；
3、在地址栏粘贴刚才复制的代码；
4、出来一个黑框框了吧，OK，可以用了，用鼠标点击某个地方，就能显示DOM 结构和一些 CSS 样式。
IE6支持PNG透明(alpha通道)的4种方法
日期：2009-02-19 | 分类：前端技术
想特别说明一下，IE6与生俱来就支持png8的索引色透明度，但不支持png的 alpha 透明度。而我们一直要解决的是让IE6支持PNG的 alpha 透明度。下面我收集整理了4种方法，但都是以滤镜、Js、css 等作为基础模拟还原效果，虽然没有真正的解决alpha透明度问题，但也总算解决了燃眉之急。
IE6支持png8透明:
IE6与生俱来就支持png8的索引色透明度，但不支持png或8位以上的 alpha 透明度。而对于非动画的GIF建议你使用PNG8，因为体积会更小。
测试实例：http://blog.gulu77.com/demo/200809/test_IE6png8/
1、AlphaImageLoader 筛选器
使用简介：在每个标签样式中插入：
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’, sizingMethod=’scale’)
官方原文：http://support.microsoft.com/kb/294714/zh-cn go
测试实例：http://blog.gulu77.com/demo/200809/test_AlphaImageLoader/
2、PNG Transparency in IE
使用简介：相对来说比较简洁，使用一段包含滤镜的JavaScript 就可以模拟图片或背景 PNG alpha 透明度。
官方原文：http://codingforums.com/archive/index.php?t-80555.html go
测试实例：http://blog.gulu77.com/demo/200809/test_PNGTransparncyinIE/
3、IE PNG Fix v1.0 / 2.0 Alpha 2
使用简介：页面标签使用behavior:url(”iepngfix.htc”);来调用外部包含js、css的iepngfix.htc文件來修正PNG alpha 透明度。
官方原文：http://www.twinhelix.com/css/iepngfix/ go
测试实例：http://blog.gulu77.com/demo/200809/test_iepngfix/
4、IE7/IE8 JavaScript library
使用简介：ie7/ie8-js是一个解决IE与W3C标准的冲突的JS库，使微软的IE的行为像一个Web标准兼容的浏览器，支持更多的W3C标准。
官方原文：http://code.google.com/p/ie7-js/ go
测试实例：http://blog.gulu77.com/demo/200809/test_ie7-js/
全部实例打包下载：http://blog.gulu77.com/demo/200809/test_png.rar
以上内容转自：Gulu77
原文地址：http://blog.gulu77.com/?p=147
还发现一个方法：belatedPNG 。具体方法是将下面的代码插到<head></head>之间：
<script src="DD_belatedPNG_0.0.7a-min.js"></script>
<script>
DD_belatedPNG.fix('*');
</script>
<![endif]-->
此方法能同时解决图片和背景问题。
所用到的 js 文件您可以到作者的博客上下载，地址是：
百度有啊CSS圆角方案
日期：2009-02-18 | 分类：CSS
百度有啊的 CSS 圆角写法，原理和《一张图片实现圆角》差不多，也是用背景定位实现的。看代码吧： XHTML 代码：
<div class="box1"> <span class="tl"></span><span class="tr"></span> <div class="cc"> <p>圆角一</p> </div> <span class="bl"></span><span class="br"></span> </div>
CSS 代码：
.box1 {
background:url(images/bg1.gif) repeat-x #1d6cb7;
margin-top:1em;
position:relative;
zoom:1;
width:778px;
}
.box1 .tl, .box1 .tr, .box1 .bl, .box1 .br {
width:5px;
height:5px;
position:absolute;
background:url(images/bg3.gif) no-repeat;
overflow:hidden;
}
.box1 .cc {
height:40px;
padding:5px;
}
.box1 .tl {
left:0;
top:0;
}
.box1 .tr {
right:0;
top:0;
background-position:0 -5px;
}
.box1 .bl {
left:0;
bottom:0;
background-position:0 -10px;
}
.box1 .br {
right:0;
bottom:0;
background-position:0 -15px;
}
查看效果（上面的代码是第一个圆角的）
看看上面代码所用到的图片能更好的理解（下面）： 
第一部分是左上角的，第二部分是右上角的，第三部分是左下角的，第四部分是右下角的。
真正的CSS等高布局
日期：2009-02-11 | 分类：CSS
为了让网页更美观、协调，有的时候需要用到左右等到布局，传统的等高布局是用 javascript 实现的，现在来看看 silence 发明的真正的 CSS 实现的等高布局，其方法主要是采用“隐藏容器溢出”、“正内补丁”和“负外补丁”结合的方法实现的。 下面来看看实际的例子（三列等高），以下面的 XHTML 代码为例：
<div id="wrap"> <div id="left"> <p>left</p> <p>left</p> <p>left</p> <p>left</p> <p>left</p> </div> <div id="center"> <p>center</p> ……（20个或更多个） <p>center</p> </div> <div id="right"> <p>right</p> <p>right</p> <p>right</p> </div> </div>
CSS 代码：
* {
margin:0;
padding:0;
}
#wrap {
overflow:hidden;
width:1000px;
margin:0 auto;
}
#left, #center, #right {
margin-bottom:-10000px;
padding-bottom:10000px;
}
#left {
float:left;
width:250px;
background:#00FFFF;
}
#center {
float:left;
width:500px;
background:#FF0000;
}
#right {
float:right;
width:250px;
background:#00FF00;
}
查看效果 从效果中可以看到，左右两列虽然内容少，但高度和内容最多的中间列等高。其核心代码（拿本例来说）是：
#wrap {
overflow:hidden;
}
#left, #center, #right {
margin-bottom:-10000px;
padding-bottom:10000px;
}
其中的 10000px 可以修改为其他值，但不能小于最高列的高度。 经测试，此方法兼容 IE6/IE7/IE8 beta 2/FF/Opera/Chrome 。 方法很简单吧。从这里可以看出：看似简单的 CSS,其实并不简单。 ======= 华丽的分割线（2009/02/18） ================================== 前两天做网页的时候运用这样方法发现一个问题：如果子列有边框 border 属性的话，下边框不会将不显示（查看效果）。因为他们下面还有很长一部分，都被隐藏了，看图理解： 
半透明部分都被隐藏了，所以看不到下边框。
