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" />