css - 在 MAC OS 下google 浏览器、Safari浏览器，为什么设置 submit 高度无效？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

css - 在 MAC OS 下google 浏览器、Safari浏览器，为什么设置 submit 高度无效？

阿神 2017-04-17 13:52:59

[HTML讨论组]

627

<style>
        form {
            width: 200px;
            height: 100px;
            border: 1px solid royalblue;
        }
        
        input {
               height: 50px;
            l/*ine-height: 50px;*/
        }
    </style>

    <body>

        <form action="" method="post">

            <input type="submit" value="提交" />
        </form>
    </body>

如图、MAC OS 下google 浏览器、Safari浏览器（火狐可以正常显示） submit 加宽度生效，高度不生效 line-height 也不行。审查元素显示高度生效的，但是显示就没有高度。
我将相同代码拷贝到 windows 上高度生效。然后再拷贝到另一台 MAC 电脑上测试也不行。

阿神

闭关修行中......

全部回复(7)

PHP中文网2017-04-17 13:54:59 7楼

http://jsbin.com/wilecuguba/e...

并没有不生效,大概你是引入了别的样式文件导致了样式覆盖吧,可以右键审查元素看看应用的样式是否被覆盖了

-webkit-appearance: none;

去查了一下,使用该属性移除原生控件样式,当然我也没测试,但是题主可以试试.

赞 +0

添加回复

PHP中文网2017-04-17 13:54:59 6楼

我把代码复制过来看了，height有效果的，你看看是不是浏览器缓存的问题

赞 +0

添加回复

天蓬老师2017-04-17 13:54:59 5楼

height是可以生效的啊。测试地址：http://runjs.cn/detail/eezeqehm

赞 +0

添加回复

阿神2017-04-17 13:54:59 4楼

height是可以的，你是用什么浏览器看的，顺便你把全部的代码拷贝来看看

赞 +0

添加回复

大家讲道理2017-04-17 13:54:59 3楼

具体原因不太清楚
为什么 input 不能设置高度

赞 +0

添加回复

大家讲道理2017-04-17 13:54:59 2楼

试一下
display:inline-block;

赞 +0

添加回复

黄舟2017-04-17 13:54:59 1楼

box-sizing: border-box;
display: inline-block;
padding: 0;

试试这样呢?

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>