• select在各个浏览器中的兼容性问题


    我们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同,从而造成select选择框在各浏览器的显示有不同。

    下面我们通过对主要CSS属性的支持,打造全兼容select。

    对select的height、padding、line-height分别利用控制变量的方法写了个DEMO在各浏览器上测试三种情 况:

    height.100.padding.0、height.no.padding.100、no.height.no.padding,结果如下图片 所示:


    我们可以得出以下研究属性

    通过上述的研究成果属性汇总,我们知道IE6是无论如何设置都是固定高度为22px不变 的,而其他浏览器除safari都是支持height属性的,那么我们设置height:22px。那么现在我们修正一下safari浏览器,我们发现仅 有safari支持line-height属性,那么正好可以利用line-height修正其高度为22px,在font-size为12px的前提下 设置line-height:18px,这样在safari中select选择框的高度也是22px。最后FF和IE9里面的文字不居中,对其设定 padding:2px0,我们发现FF和IE9都居中了,但是各个浏览器的select的高度也并没有增加,那么这里有点疑问,在高度设定的情况下,小量数字的padding不增加整体高度?这样设置后,这几个浏览器中select的高度都是22px了。

    下面是全兼容代码示例。
    <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <htmlxmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>无标题文档</title>
    <style>
    <!--
    *{padding:0; margin:0}
    body{font-size:12px}
    select{height:22px; line-height:18px; padding:2px 0}
    -->
    </style>
    </head>
    <body>
    <div style="margin-top:20px; margin-left:20px;background:#000">
    <select>
     

      <option>演示问题一</option>
       <option>演示问题二</option>
       <option>演示问题三</option>
       <option>演示问题四</option>
       <option>演示问题五</option>
    </select>
    </div>
    </body>
    </html>
     
    转自http://blog.csdn.net/liushuwei0224/article/details/8554995
  • 相关阅读:
    利用DTrace实时检测MySQl
    改进MySQL Order By Rand()的低效率
    RDS for MySQL查询缓存 (Query Cache) 的设置和使用
    RDS For MySQL 字符集相关说明
    RDS for MySQL 通过 mysqlbinlog 查看 binlog 乱码
    RDS for MySQL Mysqldump 常见问题和处理
    RDS for MySQL Online DDL 使用
    RDS MySQL 表上 Metadata lock 的产生和处理
    RDS for MySQL 如何使用 Percona Toolkit
    北京已成为投融资诈骗重灾区:存好骗子公司黑名单,谨防上当!
  • 原文地址:https://www.cnblogs.com/manfredHu/p/4172804.html
Copyright © 2020-2023  润新知