问答博客资讯标签用户活动
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

［css］button的高度无法改变

头像
number1020
    35134
    头像
    王铁手
      4.1k153452

      突然在chrome和safari中button的高度居然无法更改，无论改成多少，都是显示默认的高度。在火狐中测试则一切正常.这是什么样的低级错误...

      代码如下：

      <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    .set{
        height: 40px;
        width: 90px;
        }
    </style>
</head>
<body>
<input class="set" type="button" value="点击设置"/>
</body>
</html>
      csshtml
      阅读 22.3k
      7 个回答
      得票最新
      头像
      landpack
        184138
        ✓ 已被采纳

        方法1
        应该把input改为button

        <button class="set" type="button" value="点击设置"/></button>

        方法2
        在css中增加一个参数；

        <style type="text/css">
.set{
    -webkit-appearance:button;
    height: 40px;
    width: 90px;
    }
</style>

        怎么会不行呢？我在谷歌浏览器下可以修改input的按钮啊！你只需要在css中声明为button即可，我把运行结果的截图给你；
        图片描述

        头像
        simmer
          201169

          input是行内元素，对其设置宽高当然不起作用。可以设置input的display为inline-block 或 block就可以了

          头像
          super_newbie
            2921819

            这是因为Mac OS X系统下的Webkit内核对于表单样式有很强的控制，所以如果需要自己定义的话，需要重置掉浏览器的默认设置，如下：

            input[type="button"] {
    -webkit-apperaence: none; /* button也行 */
    box-sizeing: content-box; /* 默认为border-box，重置为content-box */
    padding: 0; /* 浏览器普遍为button设置了默认padding */
    
}
            头像
            funny_pp
              97514

              input是行内元素吧。

              头像
              nanie
                27924
                input[type=button] {
    padding:20px;
}
                头像
                浴火小青春
                  65732129

                  题主确定吗，我按照你的代码测试了下，Firefox和chrome都可以。
                  截图如下：
                  clipboard.png

                  clipboard.png
                  另外，input 是行内元素，按理说是不能通过设置width和height来改变高度和宽度的，但是因为像input，img这种置换元素，是可以通过设置他们改变的 参考地址

                  头像
                  从小就爱跺跺跺
                    40712

                    <button type="button">购买</button>

                    button{

                    display: inline-block;
width: 52px;
height: 30px;
line-height: 30px;
font-size: 14px;
text-align: center;
color: #fff;
background-color: #28a6ff;
border:1px solid rgba(255,255,255,.8);
-webkit-border-radius: 2px;
border-radius: 2px;
-webkit-box-sizing: border-box;
box-sizing: border-box;

                    }

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