随笔分类 -  css

IE6下position:relative元素外有overflow:auto/scroll元素
摘要：BUG描述：页面中某div使用了position:relative，外部有元素overflow：auto/scroll。在FF和IE7下表现正常，但是在IE6中该div会随鼠标滚动而滚动。分析：这是IE6一个已知的BUG：当某position:relative元素外有overflow:auto/scroll属性的块级元素包含时，会表现出postion:absolute的行为。解决方法：外部元素添加属性position:relative。把该元素的position:relative属性去掉，使用默认的static定位，并通过margin-top等属性实现类似的效果。代码结构如下1 <ul 阅读全文
posted @ 2012-11-12 16:34 日—月 阅读(236) 评论(0) 推荐(0)
设置一搓元素自动适应宽度
摘要：问题：如下图这个时候，右边有一撮的元素，自动排列，不知道宽度。右边常见的写法有两种1 div>a*n 这种情况下，a不需要浮动这个时候，我试了，word-break和word-wrap.在各浏览器下表现不一致。转而改成，a:{display:block;float:left;white-space:nowrap;}这样就OK了2 ul>li*n>a 这种情况下，li左浮动这时候同样按照上面的样式写就OK了。关于word-break,word-wrap,white-space1 white-space: 是否折行 。参考w3school的属性可取的值：其中inherit属性，i 阅读全文
posted @ 2012-06-06 17:28 日—月 阅读(218) 评论(0) 推荐(0)
ie6-7下的li内有浮动元素后导致多出了4px的高度的bug
摘要：没有仔细的去看原因。稍微搜索了一下，找到了解决方法。哎，知道就行了，样式bug这个东西，深入研究也研究不出啥来。记住就行了<style type="text/css">body{margin:0,padding:0;}ul{height:56px;background:#f1f;}li{overflow:hidden;list-style:none;height:28px;width:100px;background:#22f;}div{height:28px;float:left;}</style> <ul> <li class= 阅读全文
posted @ 2012-05-23 17:59 日—月 阅读(216) 评论(0) 推荐(0)
一个Tahoma字体bug引发的思考—关于样式bug的分析流程
摘要：这是一篇分析流文章，不是技术流。问题：我们经常会碰到很多莫名其妙的样式bug，也许10个浏览器下，9个浏览器是好的。但是就有一个浏览器有问题。很多情况下，ie6/7出bug的几率比较大，当然解决办法也是很多，zIndex，双边距，末尾多一个字，等等都成为了耳熟能详的bug流派了。但是opera，firefox，safari下也会有bug，这个时候要是出了问题该怎么办呢。一个opera的bug实例我还是得说，我这里只是提供一个解决问题的流程，具体是什么什么原因导致的，就不做深入研究了。bug如下。------------这个结构大家应该很熟悉了，很多情况下就是 ul>li*n 的样子。li 阅读全文
posted @ 2012-05-15 21:27 日—月 阅读(853) 评论(0) 推荐(0)
ie6-bug：png透明导致的事件无效
摘要：开场：ie6，就是个浪费时间的玩意儿。问题：在ie6下。如果给一个元素设置了png24的背景。并且使用了滤镜使其透明。那么将导致，在这个元素内的所有元素的click，mouseover等事件无效解决方法：点这里下载总结：定位是解决这个问题的根本 阅读全文
posted @ 2011-06-14 15:35 日—月 阅读(228) 评论(0) 推荐(0)
清楚浮动的三种方式
摘要：开场白：我竟然不知道overflow:hidden可以清除浮动。其实那本css高级书上都有的。方法： 1 新标签{clear:both} 2 父标签{overflow:hidden||auto} 3 父标签:after{content:" ";font-size:0;display:block;height:0;clear:both;visibility:hidden;overflow:hidden;} 父标签{zoom:1}总结：看书要看仔细啊 阅读全文
posted @ 2011-05-26 10:03 日—月 阅读(159) 评论(0) 推荐(0)
ie6-7bug.之zIndex层叠
摘要：这个是ie6-7下。zIndex的bug。可以在ff/ie8下 和 ie6/7下做对比。问题描述：在ie6/7下。有out1和out2两个同级的div，现在在其内部分别有一个in1和in2。现在在ie6/7下，无论in1怎么设置z-index.都无法将out2盖住。只能从根本上解决问题，也就是out1的z-index要>out2的z-index才行。比如直接把out2的zIndex=-1解决。但这样有时候会需要大量的js操作。原因：在正常情况下，不设置zIndex。同级的div，zIndex是一致的。但是在ie6/7下，同级的div，后面的zIndex值已经大于前面的了。现在不管你怎么改 阅读全文
posted @ 2011-05-21 15:09 日—月 阅读(1613) 评论(0) 推荐(0)
css盖住原理
摘要：这个原理经常用到，记得当初，我第一次发现这个东西是在谷歌的音乐。http://www.google.cn/music/homepage看上面的分类导航，为什么点击选中之后，下面蓝色的线没了。今天看到新浪的首页的导航条，也有这样的应用。 这里中间是有线的，但左边的线怎么没了。这两个导航结构是相同的。这是标准的html代码：<div> <ul> <li><a href=""></a></li> <li><a href=""></a></li> 阅读全文
posted @ 2011-03-09 15:07 日—月 阅读(299) 评论(0) 推荐(0)
ie6下png透明
摘要：PNG-8 和 gif 有一些相似之处，模式都是索引颜色，只支持像素级的纯透明，不支持 alpha 透明。我们通常说的“IE6 不支持 PNG 透明”，是指不支持 PNG-24 的透明（将透明区域显示为灰色）。但是 IE6 支持 PNG-8 的透明，就像支持 gif 的透明一样。首先要先了解一下关于透明 http://hi.baidu.com/hongz1125/blog/item/73bfa6af951227c57dd92a06.htmlbackground:url("nav.png");/* 1针对ie6的。现在虽然css和image在同一个目录，但是src中还是要有i 阅读全文
posted @ 2011-03-07 15:04 日—月 阅读(235) 评论(0) 推荐(0)
也谈垂直居中
摘要：网上谈垂直居中的人很多了，我就当学习一下了。说实话，还没怎么用过。<!DOCTYPE HTML><html><head><meta charset="utf-8" /><style type="text/css">div{border:1px solid;margin:10px 20px;}img{border:1px solid;}.l1{height:100px;line-height:100px;}.l2{padding:20px 0;}.l3{height:80px;display:ta 阅读全文
posted @ 2011-03-03 16:10 日—月 阅读(230) 评论(0) 推荐(0)
按钮美化
摘要：默认情况下加了border之后最简单的css3圆角美化加了border之后用 button .../button标签来实现精致的效果参照http://ued.koubei.com/?p=232另外关于这里的圆角的实现方法1：通过 模拟的在四个角上加一些 div 2：通过 精确的圆角计算3：通过 在角上加O等字符定位4：通过 背景图片 阅读全文
posted @ 2011-01-24 09:11 日—月 阅读(343) 评论(0) 推荐(0)