元素有高度 但是css设置背景色不显示

Question

* {
  margin: 0;
  padding: 0;
}

body, html {
  width: 100%;
  height: 100%;
}

//字体图标 start
@font-face {
  font-family: 'm';
  src: url('../fonts/3M.eot?k5ywnw');
  src: url('../fonts/3M.eot?k5ywnw#iefix') format('embedded-opentype'),
  url('../fonts/3M.ttf?k5ywnw') format('truetype'),
  url('../fonts/3M.woff?k5ywnw') format('woff'),
  url('../fonts/3M.svg?k5ywnw#3M') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="m-"], [class*=" m-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'm' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.m-binding:before {
  content: "\e900";
}

.m-level:before {
  content: "\e901";
}

.m-swiper:before {
  content: "\e902";
}

.m-integral:before {
  content: "\e903";
}

.m-remind:before {
  content: "\e904";
}

.m-account2:before {
  content: "\e905";
}

.m-success:before {
  content: "\e906";
}

.m-authcode:before {
  content: "\e907";
}

.m-password:before {
  content: "\e908";
}

.m-account:before {
  content: "\e909";
}

//字体图标 end

//字体颜色 start
.text-nav {
  color: #181818;
}

.text-hearder {
  color: #333333;
}

.text-placeholder {
  color: #cdcdcd;
  font-size: 16px;
}

.text-dark {
  color: #606060;
}

.text-white {
  color: #ffffff;
}

.text-dominant {
  color: #a6b8c7
}

//字体颜色 end

//字体大小 start
.text-m {
  font-size: 24px;
}

.text-s {
  font-size: 12px;
}

//字体大小 end

.page-flex {
  display: flex;
}

.page-header {
  height: 50px;
  align-items: center;
}

.img-responsive {
  width: 100%;
}

.text-center {
  text-align: center;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.pt15 {
  padding-top: 15px;
}

.pb15 {
  padding-bottom: 15px;
}

.mt30 {
  margin-top: 30px;
}

.page-header.login .logo, .page-header.register .logo {
  height: 20px;
  padding: 0px 10px;
  position: absolute;
}

.page-header.index .logo {
  height: 20px;
  padding: 0px 10px;
}

.page-header.index p:nth-child(3) {
  position: absolute;
  right: 10px;
}

.container {
  padding: 0 35px;
}

.weui-cell {
  padding-left: 0;
}

.weui-cell:before, .weui-cells:before, .weui-cells:after {
  border: none;
}

//login start
.weui-label {
  width: 45px;
}

.input {
  border-bottom: 2px solid #cdcdcd;
  > img {
    height: calc(100% + 2px);
  }
}

.forgotPadssword {
  color: #606060;
  text-decoration: underline;
}

.regeister-remind {
  width: 54%;
  margin-left: 23%;
  text-align: center;
  display: table;
  align-items: center;
  vertical-align: middle;
  .weui-btn, p {
    display: inline-block;
    display: table-cell;
    font-size: 14px;
  }
}

.text-supplement > a {
  color: #ff0000;
  text-decoration: underline;
}

.login-remind {
  width: 36%;
  text-align: center;
  display: table;
  align-items: center;
  vertical-align: middle;
  .weui-btn, p {
    display: inline-block;
    display: table-cell;
    font-size: 14px;
  }
}

.btn {
  color: #94a7b7;
  border: 1px solid #94a7b7;
  line-height: 2;
}

.fill-btn {
  background: #a6b8c7;
}

.shade-success {
  background: rgba(0, 0, 0, .8);
  z-index: 2;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  .box {
    position: absolute;
    width: 90%;
    height: 34%;
    top: 26%;
    left: 5%;
    background: #fff;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    i {
      font-size: 56px;
    }
    a {
      width: 80%;
      margin-left: 10%;
    }
  }
}

//login end

//index start
.weui-navbar + .weui-tab__bd {
  padding-top: 0px;
}

.weui-navbar {
  bottom: 0;
  top: auto;
  background-color: #fff;
  .weui-navbar__item.weui-bar__item--on, .weui-navbar__item {
    color: #181818;
    font-size: 18px;
    background-color: #fff;
    padding: 0;
    margin: 13px 0;
    border-right: 1px solid #e0e0e0
  }
}
.weui-tab__bd .weui-tab__bd-item.weui-tab__bd-item--active{
  display: flex;
  flex-direction: column;
}
.panel {
  padding: 0 10px;
  width: 100%;
  display: -webkit-box;
  box-sizing: border-box;
  overflow: hidden;
  a{
    display: block;
  }
  .link-activity {
    background-color: #c5c9cc;
    width: 50%;
    height: 86%;
    float: left;
    padding-right: 5px;
  }
  .r{
    float: right;
    width: 50%;
    height: 86%;
    .link-exchange {
      background: #cec4c6;
      width: 100%;
      height: 50%;
      float: left;
    }
    .link-userinfo {
      background: #c5d0ca;
      width: 100%;
      height: 50%;
      float: left;
    }
  }

}

//index end

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport"
          content="width=device-width,user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="assets/css/jquery-weui.min.css">
    <link rel="stylesheet" href="assets/css/weui.min.css">
    <link rel="stylesheet" href="assets/css/style.min.css">

</head>
<body>
<!-- 容器 -->
<div class="weui-tab">
    <div class="weui-navbar">
        <a class="weui-navbar__item weui-bar__item--on" href="#tab1">
            首页
        </a>
        <a class="weui-navbar__item" href="#tab2">
            活动
        </a>
        <a class="weui-navbar__item" href="#tab3">
            我的
        </a>
        <a class="weui-navbar__item" href="#tab4">
            意见反馈
        </a>
    </div>
    <div class="weui-tab__bd">
        <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active weui-flex">
            <div class="page-header weui-flex index">
                <img class="logo" src="assets/images/logo.png">
                <p class="text-hearder">您好: <span>张鑫</span></p>
                <p class="pull-right">可用积分:<span>600</span></p>
            </div>
            <div class="page-banner">
                <img class="img-responsive" src="assets/images/banner-index.jpg">
            </div>
            <div class="panel weui-flex__item">
               <a href="javascript:;" class="link-activity"></a>
                <div class="r">
                    <a href="javascript:;" class="link-exchange"></a>
                    <a href="javascript:;" class="link-userinfo"></a>
                </div>

            </div>
        </div>
        <div id="tab2" class="weui-tab__bd-item">
            <h1>活动</h1>
        </div>
        <div id="tab3" class="weui-tab__bd-item ">
            <h1>我的</h1>
        </div>
        <div id="tab4" class="weui-tab__bd-item">
            <h1>意见反馈</h1>
        </div>
    </div>
</div>


<script src="assets/js/jquery-2.1.4.js"></script>
<script src="assets/js/fastclick.js"></script>
<script src="assets/js/jquery-weui.min.js"></script>
</body>
</html>

现在a元素都是有大小的但是背景色不显示是为什么

Answer 1

跑了下你的代码，link-userinfo 没有显示，是因为，未设置float
https://jsfiddle.net/zwwill/3...
-----补充
注意看panel类里面的overflow:hidden; display:-webkit-box;并且高度未设置即为auto，此时的panel内a便标签有设置为float:left 那么 float一旦设置，原生将“脱离”文档流，即不在占用panel的空间，此时即使a便签有高度也无法“撑开“ panel，因为 panel 设置了 hidden 属性，所有被隐藏了，但是，当overflow:hidden;display:block;同时存在时，会重新计算panel的大小

解决方案有多种，简单清除 a 便签的浮动,或者 display:block;较为方便