HTML前端样式踩坑记【持续更新】

前言：一个小白在写前端代码过程中遇到的各种样式兼容问题记录

超长文本不自动换行超出边框的问题

需求：做一个展示错误日志的页面，相当简单，把后台返回的一大坨日志，合理格式化换行符号后展示在前端。但对于一句没有任何空格的超长文本，前端未自动换行，导致超出边框展示。

文本超出边框展示

而有空格的长文本，可以在空格处换行，可见前端是有默认换行动作的，但为了保证文本可读性，不会轻易断开连续文本。

解决：添加 word-wrap: break-word; 属性，该属性会先尝试把超长的部分放到下一行展示，如果还是展示不开就强制单词内断句。

缩略图table，点击图片蒙板展示大图时，表格边框透过蒙板展示到顶层，特别难看

需求：在一个table中，某个cell中是一张缩略图，点击后展示大图，此时蒙板挡住后面页面，但样式问题出现了，底层表格外边框透过蒙板展示到顶层了，很难看

边框展示层级异常

解决：CSS样式层级的问题，在大图展示的div的样式表中添加如下属性即可：

z-index: 999; /*值越大越在顶层*/

配合z-index的使用，要同时配置position属性，absolute、relative或fixed都可以。

空数组居然不空？

js中定义了一个数组 var a=[]，在其他代码处会判定这个变量是否为空来做一些出来，然而if(a!=[]) 永远为true，深究了下原因发现，对js的变量机制还是不熟悉。

[] 在js中就相当于new Array()，这是一个新对象给了新的空间，a!=[]实际比较的是两个对象的地址，而非内容，因此当然永远为true。因此要用其他方法判定，比如：

JSON.stringify(a) === '[]'

a.length === 0

+a === 0

但比较保险的还是参考了网上的一个方法：

function isEmptyObject(e) {

    var t;

    for(t in e) {

        return !1;

    }

    return !0;

}