Css 细节总结

display：inline-block

<style>
ul li{
display: inline-block;
border:1px solid red;
padding:10px 0;
}
</style>
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
</ul>

display: inline-block;中间出现了空白

解决

因为连续多个空白符（空格，换行符，回车符等）引起的

至于如何解决display:inline-block;行内块元素出现空白空隙问题

答案就是：给他的父元素加：font-size:0px;

<style>
ul{
font-size:0px;
}
ul li{
display: inline-block;
border:1px solid red;
padding:10px 0;
font-size:16px;
}
</style>
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
</ul>

table td

有汉字的td会换行，但是如果是纯数字和纯字母的td没有换行，浏览器出现的横向的滚动条

解决

style=”word-break:break-all;”

button 边框的不同

input 和 button 一起时 要注意一下 这两个元素要区别对待

自适应高度的div里放置图片在下方会有一点空白距离

这个属于img属性问题。

img标签属于行变量标签，和文字一样，下面有一个字间距。

解决

对img属性，增加一个

display:block;

即可去掉下面空白。

苹果手机input样式

苹果手机的input

会出现按钮 颜色不正，有自己圆角，本输入框会有内阴影,点击输入的时候，会有灰色背景

解决

-webkit-appearance:none；就ok了~哈哈！！

还有加入 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 就可以去除了点击输入框时出现灰色背景的样式；

在苹果手机上 如果有一连串的字出现他就会识别为电话号码 不仅点击会出现通话 提示 页面还会随意跳转

解决

应该给页面显示不识别电话号码

<meta content="telephone=no" name="format-detection" />