[css]button的高度无法改变

突然在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>
阅读 13.7k
评论
    7 个回答

    方法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即可,我把运行结果的截图给你;
    图片描述

      • 201

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

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

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

          input是行内元素吧。

            • 279
            input[type=button] {
                padding:20px;
            }

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

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

                <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;

                }

                  撰写回答

                  登录后参与交流、获取后续更新提醒

                  相似问题
                  推荐文章