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

作者mazerain 文章分类 分类:转载 文章评论 0条评论 阅读次数 已被围观 1770

    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做了处理

 

       更多请看:http://bbs.blueidea.com/thread-2692909-1-1.html

【上一篇】前端工程师新手必读
【下一篇】人生的态度

发表评论: