如何更好地控制input输入框的高度
1个回答
2016-12-21 · 做真实的自己 用良心做教育
千锋教育
千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI＆UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。
向TA提问
关注
![]()
展开全部
px 测试结果是 浏览器 height + padding-top + padding-bottom + border-top-width + border-bottom-width IE6(xp) 21 + 2 + 1 + 2 + 2 = 28 IE7(xp) 21 + 2 + 1 + 2 + 2 = 28 IE8(win7) 21 + 2 + 1 + 2 + 2 = 28 Firefox 3.5(xp) 21 + 2 + 1 + 2 + 2 = 28 Firefox 3.5(win7) 23 + 2 + 1 + 1 + 1 = 28 Firefox 3.5(mac 10.6.2) 19 + 2 + 1 + 3 + 3 = 28 Firefox 3.5(ubuntu 10.04) 19 + 2 + 1 + 3 + 3 = 28 Chrome 5(xp) 21 + 2 + 1 + 2 + 2 = 28 Chrome 5(win7) 21 + 2 + 1 + 2 + 2 = 28 Chrome 5(mac 10.6.2) 21 + 2 + 1 + 2 + 2 = 28 Chrome 5(ubuntu 10.04) 21 + 2 + 1 + 2 + 2 = 28 效果相当理想 , 所有浏览器都是 28px, 看来即使是 Firefox 和 Chrom 在 quirks 模式下的 input 都没有遵循盒模型 , 所以线上的输入框高度在各个浏览器下很完美地保持一致 然而如果是在 standards 模式下 , 结果则是 浏览器 height + padding-top + padding-bottom + border-top-width + border-bottom-width IE6(xp) 28 + 2 + 1 + 2 + 2 = 35 IE7(xp) 28 + 2 + 1 + 2 + 2 = 35 IE8(win7) 28 + 2 + 1 + 2 + 2 = 35 Firefox 3.5(xp) 28 + 2 + 1 + 2 + 2 = 35 Firefox 3.5(win7) 28 + 2 + 1 + 1 + 1 = 32 Firefox 3.5(mac 10.6.2) 28 + 2 + 1 + 3 + 3 = 37 Firefox 3.5(ubuntu 10.04) 28 + 2 + 1 + 3 + 3 = 37 Chrome 5(xp) 28 + 2 + 1 + 2 + 2 = 35 Chrome 5(win7) 28 + 2 + 1 + 2 + 2 = 35 Chrome 5(mac 10.6.2) 28 + 2 + 1 + 2 + 2 = 35 Chrome 5(ubuntu 10.04) 28 + 2 + 1 + 2 + 2 = 35 就仅仅加了一句 <!DOCTYPE html> , 却导致浏览器差距变得如此大 , 仔细观察发现 , 主要问题在 Firefox 上 它的 border 在 win7 下是 1 像素 , xp 下是 2 像素 , mac 下是 3 像素 , 令人很头疼 , 于是打算换一种方案试试 padding 的方式 由于Firefox 的 border 问题 , 设定 height 是不可能保证高度一致的 , 除非判断再去判断操作系统类型 , 但那样做太麻烦了 , 而且说不定 mobile 版又不一样 那是否可以不通过设置 height 来控制 ?
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
