代码改变世界

随笔分类 -  CSS

让a标签里的icon在hover的状态下不出下划线

2011-06-03 15:47 by rocdu, 905 阅读, 收藏,
摘要： 有这样一个需求，一段链接文字前面加一个ICON，要求鼠标划过文字或ICON时即触发链接，也就是要求ICON要和文字本身是在一个A标签下，保持联动关系。代码结构如下，ICON做为背景写在SPAN标签里：<a><span class="icon"></span>换一换</a>要求的效果是这样的：默认时划过ICON或文字时但是如果你够追求细节，就会发现某些浏览器的表达总是与众不同（是谁我就不点名了），当鼠标划过时它会变成这样：搞成这个样子一定是不成的，细节和兼容性还是要追求的。怎么办？方法1：把字也切进图里，两张图一张字带下划线的图 阅读全文

Webkit引擎的hack

2011-05-27 16:25 by rocdu, 390 阅读, 收藏,
摘要： 使用Webkit引擎的浏览器不少，Opera、Safari、Chrome、搜狗做了两种引擎其中一种也是这个。我还是主张能不用hack，还是不要使用hack的好。这东西，对未来的浏览器兼容性都是问号。/* Webkit引擎hack */@media screen and (-webkit-min-device-pixel-ratio:0){ /* 只有Webkit引擎的浏览器可以使用我 */ .test{ border:1px red solid; }} 阅读全文

对透明效果应用的说明

2011-05-13 11:48 by rocdu, 258 阅读, 收藏,
摘要： DIV与TABLE的分别之一就是DIV具有层叠特性。DIV的层叠特性可以让UI设计变得天马行空，层层相叠，透明透底的技术实现是关键的一步。三种透明的方式：1、GIF像素透明图;2、CSS样式透明的调用，filter:alpha(opacity=60)与opacity:0.60属性共用解决浏览器兼容问题(本例透明度60%);3、PNG不规则与色彩渐变透明图。本图为GIF像素透明图:本图播放按钮为PNG圆形透明图，播放按钮下的透明层为CSS控制:PNG的透明图IE6不能友好支持，通过CSS滤镜来现实，但有一点要注意。看下面的路径结构图：style.css代码:background:url(../i 阅读全文

IE6下的text-indent属性BUG解决方法

2011-05-13 10:38 by rocdu, 1243 阅读, 收藏,
摘要： 在下图的CSS实现时出现了IE6的text-indent属性BUG问题。<h2> <span title="搜狐母婴" class="sohu-baby-icon">搜狐母婴</span> 育儿日历—活动早知道</h2>h2{ width:390px; color:#333; margin:0 auto 8px; font:600 14px/16px '宋体'; text-align:left; padding-top:5px; height:19px;}h2 .sohu-baby-icon 阅读全文

IE6_min-heigth_BUG

2011-04-29 18:00 by rocdu, 295 阅读, 收藏,
摘要： IE6不认样式：min-height、max-height样式;做页面要给容器预设一个黓认最小高度值时，IE6不认min-height样式，解决的办法是使用HACK，_height:高度值，IE6专用。当内容高度超出容器时也会自动扩展，但如果其它浏览器直接写height值的话，内容超出容器时会出现问题所以还是要写min-height的。 阅读全文

A标签中的行高问题

2011-04-15 23:54 by rocdu, 892 阅读, 收藏,
摘要： 今天做一页面时同事发现他写的A标签HOVER时应该出现的下划线在IE下没有显示出来？这个问题和浏览器的解析有关，以前就发现过，所以通常下我写A标签CSS时行高在没有特定要求下都是高出字号２个像素．字号行高相同有可能出现A标签HOVER时不出现下划线：font:12px/12px '宋体';没有问题的写法，行高要高出字号２个像素以上：font:12px/14px '宋体'; 阅读全文

IE8_hack

2011-04-01 15:59 by rocdu, 141 阅读, 收藏,
摘要： .test{border:10px red solid;border:10px blue solid\0;width:300px;height:300px}<div class="test">ie8测试</div>测试结果：\0:IE6:REDIE7:REDIE8:BLUE\1-8:IE6:REDIE7:REDIE8: RED\9:IE6: BLUEIE7: BLUEIE8: BLUE 阅读全文

滚动条＋定位＝ieBug-狐狸空间

2011-03-31 22:30 by rocdu, 176 阅读, 收藏,
摘要： 需要做滚动条的父级元素，在其子级中有元素应用到定位样式，IE下会出现内容不跟随滚动条滚动的大BUG．今天这一问题在这个项目的好友引导列表页中又一次随到了，解决的办法是在父级元素上添加相对定位样式（position:relative）． 阅读全文