css常见的样式异常

昨天周一工作上忙的透支了，昨晚回到家，收拾完了之后十一点多了，忽然发现自己今天没有升级简书…再去整理资料已经来不及写新文章了，就算写了新文章发布了，内容质量也是不堪的，不如不写了！实不相瞒，我挑战了简书的日更计划，因为昨天没有发布新文章，所以前功尽弃…伤心之余，还是要捡起这个flag。
那今天就来聊聊前台css样式的少量怪异现象吧！

1. display: inline-bloack的元素，如何处理间隙？

• 代码

// html<div class="page">  <div class="inline_block ib1"></div>  <div class="inline_block ib2"></div></div>// css.inline_block {  display: inline-block;  width: 40%;  height: 50px;}.ib1 {  background: blue;}.ib2 {  background: red;}

• 现象 如下图；两个div之间有间隙

  间隙

• 处理
  方法一：由于标签之间的空格，因而去掉空格即可以处理了；但是这个方法很笨
  方法二：font-size:0这个方式可以处理空隙的问题

.page {  font-size: 0;  // 父级元素设为font-size:0}.inline_block {  display: inline-block;  width: 40%;  height: 50px;  font-size: 0; // 还有这里}

2. 设置opacity之后，子元素也会出现透明度

• 代码

// html<div class="page">  <div class="opacity">    <span>opacity</span>  </div></div>// css.page {  opacity: 0.5;}.opacity {  width: 40%;  height: 50px;  font-size: 15px;  background: #000;}span {  font-size: 20px;  line-height: 50px;  color: red;}

• 现象 如下图
  透明度
• 处理
  不要使用opacity，使用background: rgba()方法来设置

// css 更改.page {  background: rgba(255, 255, 255, 0.5);}

3. <img>和<span>元素，垂直方向上，不对齐

• 代码

<div class="page">  <img src="../../assets/images/ceb_3x.png" alt>  <span>text</span></div>

• 现象 如下图
  垂直未居中
• 处理 将img元素的vertical-align设置为middle

img {  vertical-align: middle;}

4. 弹窗出现，弹窗后面的元素还可以滚动

• 处理
  设置body的overflow:hidden，关闭弹窗的时候，再恢复overflow的属性

5. 最外层div想要占满一屏

设置div的css样式为

display: absolute;min-height: 100%;

6. input 设置disabled属性之后 placeholder变成黑色

某些手机端会出现这样的奇怪样式，但是普遍情况下还是不会有这种怪异现象的

input::-webkit-input-placeholder{  color: #cccccc;  -webkit-text-fill-color: #ccc;  opacity: 1;  -webkit-opacity:1;}input:disabled{  background: none;  color: #333;  -webkit-text-fill-color: #333;  opacity: 1;  -webkit-opacity:1;}input:disabled::-webkit-input-placeholder{  color: #cccccc;  -webkit-text-fill-color: #ccc;  opacity: 1;  -webkit-opacity:1;}

7. input上边框有阴影

有些手机端会出现这样的问题，但是普遍情况下不会出现这样的问题

input:focus{outline:none}-webkit-appearance: none;

8. pre标签中支持换行

pre标签中的内容是不支持换行，所以换行的话，需要自定义换行属性

pre {    white-space: pre-wrap;    white-space: -moz-pre-wrap;    white-space: -pre-wrap;    white-space: -o-pre-wrap;    word-wrap: break-word;}