为什么同样的css,在手机浏览器看input="botton"与text不一样大呢?

我遇到了一个很奇葩的现象:

<style>
    .input_style_2{
        width: 28px;
        height:28px;
        margin: 0px 2px;
        border: none;
        background: #f4f4f4;
        line-height: 24px;
        text-align: center;
    }
</style>
<body>
    <input type="button" class=input_style_2 value="-" />
    <input type="text" class=input_style_2 value="2" />
    <input type="button" class=input_style_2 value="+" />
</body>

这样的3个按钮,在网页上显示是这样的图片描述

但是在手机上显示却是这样的图片描述

为什么同样的css,button和text的大小不一样呢

阅读 3k
2 个回答

不同的浏览器默认样式不一样各种坑,所以才会有reset 和 normalize.css,你这里可以是默认的padding不一样。

如果只是这么简单的一点css的话。岂止是这样,你会发现基本上每个浏览器有可能都有不一样。因为浏览器本身定义了很多的代理样式。比如IOS safari浏览器:

clipboard.png

那展示出来的按钮跟你上面这个又不一样。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题