input, select 的宽与高怎么兼容IE、FF

最新推荐文章于 2024-09-10 09:28:05 发布

betty1120

最新推荐文章于 2024-09-10 09:28:05 发布

阅读量1.9k

点赞数

分类专栏： css 文章标签： input ie firefox xhtml html border

本文链接：https://blog.csdn.net/betty1120/article/details/6529098

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

首先在标准兼容模式IE和firefox是一样的，在设成同一个高度或宽度的时候，显示的input和select不一样宽，也不一样高。
这似乎是由于IE和firefox的select元素使用的盒模型是border-box，把border的宽度算在width里面了。而input（按钮除外）还是用的标准的盒模型。

所以把select改为标准盒模型：-moz-box-sizing: content-box;应该在firefox下就一致了。
IE下面的话，没有这种切换方式，所以要么切换DTD让IE运行在quirks模式（这时大家都是border-box的盒模型，不过这时候也要考虑firefox在quirks模式的一些特性），要么用hack吧。

另外，IE下面select的高度不能通过height调整。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

不同效果也不同

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">