收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 1196|回复: 6

[求助] input兼容问题

[复制链接]
发表于 2016-9-13 15:44:13 | 显示全部楼层 |阅读模式
一样的高度,在苹果和安卓的显示完全不同,有什么办法让他们兼容! 未标题-1.jpg
发表于 2016-9-19 15:24:05 | 显示全部楼层
本帖最后由 jianwang19 于 2016-9-19 15:28 编辑

一般的:
input{line-height: 44px; font-size: 14px; padding: 0px 5px; height: 44px; width: 200px; display: block; background: #fff; border-radius: 3px; border: 1px solid #dfdfdf;}
这样的设置在pc是没问题的,但是在移动端容易出bug,不建议这样使用。

最靠谱的方法是:
input{line-height: 14px; font-size: 14px; padding: 15px 5px; height: 14px; width: 200px; display: block; background: #fff; border-radius: 3px; border: 1px solid #dfdfdf;}

这个bug我遇到过很多次,经过我的分析,是行高line-height在两个系统上的显示差异,直接用padding固定住就行。
回复 支持 1 反对 0

使用道具 举报

发表于 2016-9-14 10:22:47 | 显示全部楼层
楼主加行高和display:block了???
回复 支持 反对

使用道具 举报

 楼主| 发表于 2016-9-14 15:38:08 | 显示全部楼层
atlantis2007 发表于 2016-9-14 10:22
楼主加行高和display:block了???

没加呀,我之前用的单位是px现在改成了em ,好多了,但这也不是解决办法呀
回复 支持 反对

使用道具 举报

发表于 2016-9-18 14:04:11 | 显示全部楼层
试试line-height  然后试试看input本身的valign="middle"。。虽然这个属性不是很靠谱。。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2016-9-20 08:30:36 | 显示全部楼层
atlantis2007 发表于 2016-9-14 10:22
楼主加行高和display:block了???

我现在用的是em ,它的出处要比px小一些,实在是没办法了!
回复 支持 反对

使用道具 举报

发表于 2016-9-21 17:53:46 | 显示全部楼层
huerfei 发表于 2016-9-14 15:38
没加呀,我之前用的单位是px现在改成了em ,好多了,但这也不是解决办法呀

em是一个相对单位,它是根据你当前的父级字体大小来定义的,把input变成block之后,你看看是不是解决问题了
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-10-23 02:54 , Processed in 0.107151 second(s), 11 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表