zoukankan      html  css  js  c++  java
  • 解决IE6IE7下li上下间距

    li子元素浮动,li不浮动,如下情景

    ul>li*3>a[href="#" style="float:left"]

    在IE6/7下li会向下产生大约2px的外边距。


    解决方法:li{vertical-align:top/bottom;}

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>li 间距</title>
    <style type="text/css">
    ul,li{list-style:none; padding:0; margin:0; border:1px solid red;}
    li{height:30px;}
    li a{float:left;}
    </style>
    </head>
    <body>
    <ul>
        <li><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a></li>
        <li><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a></li>
        <li><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a></li>
        <li><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a></li>
        <li><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a></li>
    </ul>
    <ul style="vertical-align:bottom;">
        <li><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a></li>
        <li><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a></li>
        <li><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a></li>
        <li><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a></li>
        <li><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a></li>
    </ul>
    </body>
    </html>

    http://www.zhoubo.name/2012/12/17/ie6-ie7-li-margin/

  • 相关阅读:
    公司后台切图
    XMLHttpRequest对象
    XML/JSDOM处理
    js访问xml之节点操作
    CSS3 输入框阴影效果及其他阴影效果
    GitHub用户仓库批量下载
    WTL10_9163应用向导安装后的小问题
    别学MFC了,要学就学这些...
    使用基于范围的 for 循环迭代范围
    使用未命名的命名空间代替静态全局变量
  • 原文地址:https://www.cnblogs.com/blosaa/p/3008277.html
Copyright © 2011-2022 走看看