113.CSS怪象记录

记录一下曾经遇见的css怪象，不如你也来看看，搜一搜我们曾经遇见的坑。

坑位一：inline-block

坑位1.1：inline-block和多出的空白。

<div class="father">
  <div class="box">1</div>
  <div class="box">2</div>
</div>

我们发现这里的 1 和 2，其中会差 4px 的距离；如下：

解决方案:
一、父级设置 font-size 为0，子级再重新设置字体大小（该方案在 Safari 上不生效！！可惜了）

.father {
  font-size: 0;
}
.box {
  display: inline-block;
  font-size: 16px;
}

效果如下，我们发现 Safari 上问题没有被解决：

二、超级兼容的解决方案（老实说我也是现在查了才发现Safari竟然不兼容解决方案一！！！）：
a.使用父级 font-size:0 的方式兼容 Chrome 和火狐；
b.使用 letter-space: -Npx; 的方式来兼容 Safari；

.father {
  font-size: 0;
  letter-spacing: -4px;
}
.box {
  display: inline-block;
  font-size: 16px;
  letter-spacing: normal;
}

这一次，在chrome和safari等大多数浏览器解决了

坑位1.2：inline-block和元素上浮。

<style>
  div {
    display: inline-block;
     100px;
    height: 100px;
    text-align: center;
    font-size: 12px;
  }
  .box-1 {background-color: #5bc2e7;}
  .box-2 {background-color: #6980c5;}
  .box-3 {background-color: #70dfdf;}
  .box-4 {background-color: #f7f6ee;}
  .box-5 {background-color: #385466;}
</style>
</head>
<body>
  <div class="box-1">#5bc2e7;</div>
  <div class="box-2"></div>
  <div class="box-3"></div>
  <div class="box-4">#f7f6ee</div>
  <div class="box-5">#385466</div>
</body>

该问题出现的原因是因为 inline和inline-block元素是是基于 baseline(vertical-align) 对齐。
A.有文字的 inline-block 元素 baseline 为文字底部
B.没有文字（或者 img）的 inline-block 元素是块的底部

解决方案：
设置大家的 vertilcal-align 为 top 即解决了

div {
  vertical-align: top;
}

坑位1.3：inline-block和移动端的垂直居中问题：在安卓浏览器中

原因：安卓的字体排版问题导致。
解决方案：
我是建议还是换一种垂直居中的方式

display: flex;
height: 30px;
align-items: center;

坑位1.4：css设置多行文字超出省略后部分文字被遮挡

<style>
  #box {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    background: #089e8a;
    height: 36px;
  }
</style>
</head>
<body>
  <div id="box">
    1.使用纯css3 实现方法: 一个外国的网站实现的纯CSS多行超出隐藏加省略号。 $font-size: 26px; $line-height: 1.4; $lines-to-show: 3; h2 { ...
      2.使用伪元素加绝对定位 实现方法: p { position:relative; line-height:20px; max-height:40px; overflow:hidden; } p::after {...
  </div>
</body>

下图为以上代码的效果，我们发现其中有一部分文字被挡住了，这样的体验是很糟糕的。

解决方案：
使用多行省略的时候，要注意 height 要为每行高度的整数倍。
height = n * line-height
添加代码如下

#box {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  background: #089e8a;
  height: 36px;
  /* 以下为添加代码 */
  line-height: 18px;
}

正确效果

坑位二：关于 absolute-left

当然也有可能不是坑；不过很奇怪的是有时候在 PC端的时候是没错的，到了移动端就错了==；
坑点：在 absolute 中，left: auto; = left: 50%; ？？？（也许是我才疏学浅的错误认知，我一直以为 left:auto 与 left:0是一致的）

<ul class="ul">
  <li class="li active">1</li>
  <li class="li">2</li>
</ul>
<style>
  ul,
  li {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .ul {
     300px;
  }
  .li {
    position: relative;
    box-sizing: border-box;
    display: inline-block;
     100px;
    border: 1px solid #089e8a;
  }
  .li.active::after {
    position: absolute;
    content: '';
    bottom: -2px;
    height: 2px;
     100%;
    background: cornflowerblue;
  }
</style>

现象如下（不设置 left 的结果）：

所以，以后，为了实现效果，我将会显示设置 left: 0;。

continue.