问题总结

前段时间遇到的问题总结

201608-201610


pointer-events(CSS3)

==auto:==
与pointer-events属性未指定时的表现效果相同。在svg内容上与visiblepainted值相同

==none:==
元素永远不会成为鼠标事件的target。
但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。

safari下兼容性

  1. inline-block间距只能使用float调教
  2. before等伪类content不能为空

body滚动条获取

1
scrollwidth-offsetwidth

在IE10、11、edge下该值为==0==,微软为了更好的兼容触摸屏,ie10及以后去掉了body的滚动条的空间,其他元素的都是可测的,在其他浏览器下值为==13==

360代理CDN

替换网址即可fonts.useso.com

<!--<link href="http://fonts.useso.com/css?family=Wire+One" rel="stylesheet" type="text/css">-->

chrome下滚动条模拟或自定义

  1. -webkit-scrollbar这个伪类可以-webkit自身的滚动条渲染关闭,并重新定义属于自己的样式:
    比如:.test::-webkit-scrollbar{
    height:10px;//这里指的是横向滚动条的高度
    width:10px://这里指的是竖向滚动条的宽度
    }
  2. -webkit-scrollbar-track这个伪类可以设置滚动条区域的背景样式;
  3. -webkit-scrollbar-thumb这个伪类可以设置滚动条的样式。

鼠标定位

  1. clientX是鼠标相对于浏览器的(不计算滚动条)
  2. JQ.offset是相对于文档的(计算滚动条)
  3. offsetX是触发事件的对象中鼠标位置的水平坐标,当有该对象内部有多个对象(DOM冒泡,捕获)会取得多个值

禁止文本选定

禁用双击选定文本图片

1
onselectstart="return false;" style="-moz-user-select:none;"

其他TIPS

  1. 记得给body加一个min-width防止显示不全
  2. 1
    2
    3
    4
    5
    6
    .opacity{
    filter:alpha(opacity=50); /* IE */
    -moz-opacity:0.5; /* 老版Mozilla */
    -khtml-opacity:0.5; /* 老版Safari */
    opacity: 0.5; /* 支持opacity的浏览器*/
    }
  3. Firefox滑轮事件e.detail,正负值相反

  4. IE下滚到底部时_winHeight + _scrollTop >= _offsetHeight并不会相等,据测大1

最后总结一下待解决的问题

  1. IE下使用absolute定位移出浏览器之后,使用transform有异常
Author: PaulHan
Link: https://www.paulhan.com/blog/2016/10/16/问题总结/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.