问题:

  在为表单添加下拉菜单时,有时候对菜单的样式没有特别的要求,就是需要修改下select元素的宽度和高度,但众所周知select元素的样式很难修改;

select在各个浏览器,字体大小为14px时的高度为20px

  希望是这样的,对边框样式也什么需求

  

  但在IE7,IE8下的表现确实这样的

  

差别有点明显,遂在select上设置line-height怎么都没有用,查看各个浏览器(没有测试safari和opera浏览器)设置line-height:对select的高度都没有什么影响;

解决办法:

  此方法不适用IE7及以下浏览器

  为了select也浏览器中有统一的高度,只给select元素设置padding来增加高度,对字体大小有限制的可以合并使用padding, font-size;从而达到统一的高度;

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Bootstrap 101 Template</title>
<style>
select{width:200px; padding:20px 0; *height:60px/*为IE7设置高度*/}
</style>
</head>
<body>
<form>
<select>
<option value="0">人民币</option>
<option value="0">美元</option>
<option value="0">越南盾</option>
<option value="0">法郎</option>
</select>
</form>
</body>
</html>

总结:

对select高度有影响的CSS属性:height, padding, font-size, zoom

为select 设置样式的更多相关文章

  1. input与select 设置相同宽高,在浏览器上却显示不一致,不整齐

    遇到 input与select 设置相同宽高,在浏览器上却显示不一致,遂实验了下(IE 10.013 ,Firefox 30.0),得出以下结论 input   width,height 值里面, 不 ...

  2. c# Chart设置样式

    一.chart属性熟悉 能够对C# chart控件属性熟悉起帮助的code, 现在分享给大家,Chart Operate Demo Code Download,如有帮助,别忘点个赞. Chart    ...

  3. 如何给DropDownList控件设置样式(ASP.NET MVC)

    前话: 应学校领导要求,要给后台管理系统添加一个搜索功能,提供可选择选项.我选择使用DropDownList去实现,熟悉.net控件的都知道,DropDownList的样子非常丑,不论是边框长宽还是里 ...

  4. 改变select箭头样式

    链接:https://blog.csdn.net/java_zhaoyanli/article/details/52549787 改变select箭头样式的方法: 1,去掉箭头: 2,设置图片为背景: ...

  5. word-wrap&&word-break,奇偶行、列设置样式

    1.word-wrap和word-break区分. 来源场景:机械租赁mvc驾驶员信息查看: 当备注的文字多的时候,第一列的值成这模样: 解决方案:设置table 的td可自动换行.首先table设置 ...

  6. 注意Android里TextView控件的一个小坑,用android:theme来设置样式时动态载入的layout会丢失该样式

    注意Android里TextView控件的一个小坑,用android:theme来设置样式时动态载入的layout会丢失该样式 这个坑,必须要注意呀, 比如在用ListView的时候,如果在List_ ...

  7. Vue系列: 如何通过组件的属性props设置样式

    比如我们要在vue中显示百度地图,然后将相关的代码包装成组件,然后需要由外部来设置组件的高度,关于props的介绍,可以参考: http://cn.vuejs.org/guide/components ...

  8. 【使用 DOM】为DOM元素设置样式

    1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...

  9. 【温故而知新-Javascript】为DOM元素设置样式

    1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...

随机推荐

  1. python 小程序 复制目录树

    1. 将一个目录树完全复制到另外一个目录下面 import os, sys """ 复制目录树 """ maxloadsize = 1024 ...

  2. 【已更新】【原创】Chrome53 最新版惊现无厘头卡死 BUG!

    发现问题 今天有客户向我们反馈了一个BUG:一个页面在IE.FireFox.Chrome52中能正常运行,但是在最新版的Chrome53中显示不了??? 习惯性的,我们需要客户提供页面在浏览器中的HT ...

  3. Theano conv2d的border_mode

    文档是这么写的: border_mode: str, int or tuple of two int Either of the following: ``'valid'``: apply filte ...

  4. Memcached+PHP+Mysql+Linux 实践

    首先确保你的服务器环境已经具备了memcached和lamp,关于在Linux上搭建memcahced+php环境可以参考我的另外一篇帖子( http://www.cnblogs.com/codeAB ...

  5. js判断浏览器类型

    使用navigator.userAgent和来判断 PC端: <script type="text/javascript">var ua=navigator.userA ...

  6. Leetcode 365. Water and Jug Problem

    可以想象有一个无限大的水罐,如果我们有两个杯子x和y,那么原来的问题等价于是否可以通过往里面注入或倒出水从而剩下z. z =? m*x + n*y 如果等式成立,那么z%gcd(x,y) == 0. ...

  7. iOS 开发总结(上)

    来源:蝴蝶之梦天使 链接:http://www.jianshu.com/p/d333cf6ae4b0 在iOS开发中经常需要使用的或不常用的知识点的总结,几年的收藏和积累(踩过的坑). 一. iPho ...

  8. Word2016(2013)怎么从任意页插入起始页码

    添加页码   1 小知识:双击任意页的页脚或页眉区域,激活页眉页脚设计界面.双击文档正文区域,返回正文编辑界面. 2 双击任意页的页脚或页眉区域,激活页眉页脚设计界面.单击"页码" ...

  9. 总结libevent安装方法

    1.先用:ls -al /usr/lib | grep libevent  查看是否已安装,如果已安装且版本低于1.3,则先通过:rpm -e libevent -nodeps 进行卸载. 2.下载l ...

  10. EmployeeTest

    package fourthf; public class EmployeeTest { public static void main(String[] args) { // TODO Auto-g ...