web标准常见问题整理(转自blueidea)

Nov 22 2012

web标准常见问题整理(转自blueidea)

mazerain

分类：转载

0条评论

已被围观 1863 次

blueidea的有许多条，我只转几条个人经常遇到的。

1.超链接访问过后hover样式就不出现的问题（IE6直接定义a标签的样式，链接访问后变色）

解决方法：是改变CSS属性的排列顺序: L-V-H-A，IE6里想要访问后不变色，必须定义a:visited。
2. IE6的双倍边距BUG

解决方法：浮动后本来外边距10px,但IE解释为20px,在样式上加上display:inline，或_margin-xxx:5px。
3. IE6使用滤镜使PNG图片透明后，容器内链接失效的问题

解决方法：为链接定义一个相对定位属性。position:relative。
另附IE6 PNG透明的解决方法：http://blog.0356sh.com/ie6_png.html

4. IE6下为什么图片下方有空隙产生

解决方法：可以是改变html的排版，或者定义img 为display:block；或者定义vertical-align属性值为vertical-align:top | bottom |middle |text-bottom；还可以设置父容器的字体大小为零，font-size:0
5. IE6下这两个层中间怎么有间隙

解决方法：这个IE的3PX BUG也是经常出现的，解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px
6. LI中内容超过长度后以省略号显示的方法

解决方法：LI的样式里可以加上text-overflow:ellipsis; -o-text-overflow:ellipsis;
7.如何对齐文本与文本输入筐

解决方法：遇到此种问题，设置文本框的 vertical-align:middle 就可以了
8.为什么IE6下容器的宽度和FF解释不同呢

解决方法：问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内，这里IE6解释为200PX ，而FF则解释为220PX。
9.为什么IE6无法定义1px左右高度的容器

解决方法：IE6下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px
10.为什么一个div里面有浮动的话这个背景颜色无法显示

解决方法：清除浮动，.cf:before, .cf:after { content:""; display:table;}.cf:after { clear:both;}.cf { zoom:1;}
11.怎么样才能让层显示在FLASH之上呢

解决方法：解决的办法是给FLASH设置透明<param name="wmode" value="transparent" />或者<param name="wmode" value="opaque" />
12.怎样使一个层垂直居中于浏览器中

解决方法：这里我们使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二
13.禁用文本框中文输入法的通用方法

解决方法：<div>验证码<input type="text" style="ime-mode:disabled"/></div>
14.浮动复制最后一个字符bug(演示中有一个div元素，有明确的width设置，在这个div中，有一个元素P——此元素有margin-right属性且该值不为0（在IE6中margin不是必需的），且在该P元素内部有三个浮动的子元素，且这三个子元素的width值比外层元素div的width大。我们来看一下在受影响的浏览器中出现了什么情况：最后一个字符“C”——被复制并重新显示在下一行。我已经强调过这里是有三个浮动元素，目前情况就是：如果有少于三个的浮动元素，此bug不会发生，而如果浮动元素数目多于三个，连续浮动元素bug就出现了)

解决方法：浮动元素span上加了position:relative这个属性，字符C就不会再IE6和IE7中出现”复制”的现象了。

15.表单控件双边距BUG(我们有一个拥有布局并且设置了margin-left属性的父节点。在IE6与IE7中，<input>和<textarea>元素的表现看起来就好像它们从父节点<div>那里继承了margin属性一样，这样它们的margin属性的值就是双重叠加的。在父节点上设置margin-right属性结果也是一样的。在功能更健全的浏览器中，<input>和<textarea>元素在垂直方向上应该和<select>对齐)

解决方法：条件注释来针对IE6和IE7做了处理