问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

input type=button样式与一般input type=text的差异问题

头像
飞舟
    37817

    如下图所示，input type=button 即使设置了 box-sizing: content-box; 他的尺寸也和 input type=text 的尺寸有几个像素的出入？这是因为什么原因，寻求大神讲解？

    结构：

    图片描述

    样式：

    图片描述

    效果：

    图片描述

    图片描述

    htmlcss
    阅读 5.1k
    1 个回答
    得票最新
    头像
    boxsnake
      6.8k21249

      不知道你代码里除了这个样式是否还有其他样式，有可能是其他样式干扰。如果没有其他样式，可能是浏览器默认样式的问题。另外登录按钮是不需要box-sizing: content-box的。

      <style type="text/css">
input {
    width: 80%;
    padding: 10px;
    outline: none;
    margin-top: 20px;
}

input[type=submit] {
}
</style>
<html>
<body>
    <input type="text" placeholder="请输入用户名">
    <input type="password" placeholder="请输入密码">
    <input type="submit" value="登录">
</body>
</html>

      这段代码的效果（Chrome）：

      clipboard.png

      如果加上box-sizing: content-box的话，效果如下：

      clipboard.png

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