美文网首页
HTML前端样式踩坑记【持续更新】

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

作者: 爱回忆的小六 | 来源:发表于2018-12-25 15:41 被阅读0次

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

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

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

文本超出边框展示

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

解决:添加 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;

}

相关文章

网友评论

      本文标题:HTML前端样式踩坑记【持续更新】

      本文链接:https://www.haomeiwen.com/subject/pgzxlqtx.html