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