input:search设置height样式无效

导航栏中的input设置成 type=search时，height属性无效了，weight属性有效。同样的css在type=text时却没有这个问题，能够正常控制宽高。

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>5-2</title>
  <link rel="stylesheet" href="css/style.css">
  <script src="js/script.js"></script>
</head>
<body>
  <header>
    <!-- 导航栏 -->
    <nav>
      <!-- 图标 -->
      <div class="icon"><img src="image/logo.png"></div>
      <!-- 分页选项卡 -->
      <div class="tab-list">
        <a href="#">课程</a>
        <a href="#">职业路径</a>
        <a href="#">实战</a>
        <a href="#">猿问</a>
        <a href="#">手记</a>
      </div>
      <!-- 搜索框和个人头像 -->
      <div class="data-detail">
        <input type="search" placeholder="前端入门">
        <button><img src="icon-1-sprite_w22.png" alt="搜索"></button>
 
        <a href="#"><img src=""></a>
        <a href="#"><img src=""></a>
 
        <a class="profile" href="#"><img src="" alt="profile"></a>
      </div>
    </nav>
  </header>
  <section class="banner">
    <h3>我的购物车</h3>
  </section>
  <section class="main">
    <div class="container">
      <!-- 购物车头部 -->
      <div class="shopping-car-header">
        <input type="checkbox" id="all-checked">全选
        <span>商品名称</span>
        <span>总价</span>
        <span>单价</span>
        <span>数量</span>
        <span>操作</span> 
      </div>
      <!-- 商品信息 -->
      <div class="shopping-car-list"></div>
      <!-- 购物车结算信息 -->
      <div class="shopping-car-footer">
        <p>应付金额<span></span></p>
        <input type="button" value="去结算">
      </div>
    </div>
  </section>
  <footer>
    <div class="container">
      <!-- 其他链接和版权信息 -->
      <div class="link-list">
        <a href="#">网站首页</a>
        <a href="#">企业合作</a>
        <a href="#">人才招聘</a>
        <a href="#">联系我们</a>
        <a href="#">讲师招募</a>
        <a href="#">常见问题</a>
        <a href="#">意见反馈</a>
        <a href="#">慕课大学</a>
        <a href="#">友情链接</a>
      </di>
      <p class="copyright">Copyright © 2017 imooc.com All Rights Reserved | 京ICP备 | 13046642号-2</p>
      <!-- 分享图标 -->
      <div class="link-icon">
        <span><img src=""></span>
        <span><img src=""></span>
        <span><img src=""></span>
      </div>
    </div>
  </footer>
</body>
</html>

css

/*all*/
* {
    margin: 0;
    padding: 0;
}
 
a {
    text-decoration: none;
}
 
a:link,
a:visited,
a:active {
    color: black;
}
 
/*header*/
header {
    /*text-align: center;*/
    width: 100%;
    height: 70px;
    background-color: black;
}
 
nav {
    float: left;
    height: 70px;
}
 
nav > .icon {
    margin-left: 10px;
    height: 70px;
    width: 128px;
    display: inline-block;
    transform: translateY(15px);
}
 
nav > .tab-list {
    margin-left: 70px;
    font-size: 0;
    display: inline-block;
}
 
nav > .tab-list a {
    text-align: center;
    display: inline-block;
    width: 100px;
    font-size: 17px;
    height: 70px;
    line-height: 70px;
    color: white;
}
 
nav > .tab-list a:nth-child(2):after {
    top: 11px;
    height: 16px;
    width: 16px;
    position: absolute;
    content: "";
    background-image: url("../image/icon-new.png");
}
 
nav > .data-detail {
    float: right;
}
 
nav > .data-detail > input {
    display: inline-block;
    height: 150px;
    width: 200px;
 
}

hood 2018-03-02

源自：JavaScript实现简易计算器 5-2 作业题

收起

2回答

嘘_别说话 2018-03-05 10:23:39

应该是mac本兼容的问题，毕竟是html5新属性。

如果要mac和window都没有问题的话，可以使用type=“text”去实现，会更好。

收起回答

小丸子爱吃菜 2018-03-02 17:53:58

测试了你的代码，input=“search”这个元素设置height属性是可以生效的呀，可以随着height值的变化而变化~

祝学习愉快！

收起回答

提问者 hood #1

好像是系统的问题，mac下无效，windows打开有效，mac和windows用的都是Chrome，为什么会这样呢？

2018-03-02 19:44:46
小于飞飞回复提问者 hood #2

将 display 设置成 block , 然后调整样式，在看看效果。

2018-03-04 13:14:13
提问者 hood 回复小于飞飞 #3

之前试过block也不行，而且这里display没理由block可以inline-block不行吧。

2018-03-04 17:57:56