[css]button的高度无法改变

number1020
  • 35

突然在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>
回复
阅读 14.8k
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即可,我把运行结果的截图给你;
图片描述

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是行内元素吧。

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;

}

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

宣传栏