低版本浏览器flex布局无法继承容器宽高问题,包含chrome
发表于
css3
分类,标签:
22
02月
2020
0
img{max-width:100%;} 问题:当一个容器设置高,并采取flex布局,如下1效图,白色框设置了flex-basic:38px; 蓝色框设置的flex-basic:auto;并且自动扩充,但是蓝色框子元素直接height:100%,在低版本浏览器,是获取不到父元素高度的。说直白点,就是父元素flex-basic:auto;子元素 height:100%,是无法获取到高度的!如:chrome升级chrome版本到以下版本,能正常获取,本文主要说低版本如何正常获取容器高度。 &nbs...
移动端判断横竖屏的方法
发表于
mobile
分类,标签:
11
02月
2020
##js(function(){ //是否支持orientation属性和事件onorientationchange varsupportOrientation=(typeofwindow.orientation==='number'&&typeofwindow.onorientationchange==='object'); //检测横竖屏函数 functiongetOrientation(){ varorientation=''; // ...
解决npm安装依赖和package.json定义版本不一致
发表于
问题记录
分类,标签:
10
02月
2020
前言 2019年搭了团队的脚手架(fd),春节前cnpminstall的时候还可以启动,但是春节后,重新cnpminstall,发现项目启动报错了。奇怪,项目代码和之前一样,一点都没改动。难道是新型冠状病毒感染了? 1.代码分析定位原因,less代码报错折腾了很长时间时间,删除代码对比,然后最终定位工程结构中此行代码导致了报错 ```<stylelang="less"> @import"./css/index.less";</style>```2.less分析 package.json。 less版本为3.9.0, 但是找到node_modules中的less版本为3.11.1是不是很奇怪?&nbs...
ie 绝对定位top最大值问题
发表于
问题记录
分类,标签:
10
01月
2020
ie绝对定位top最大值问题今天发现ie下top值超出1534736px,top值就会失效,其解决方案就是拆解,或者换个方式!换成transform即可!特别注意,ie 容器的滚动高度也是由限制的,内容最大高度为21470010px;源码:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Title</title> <style> *{  ...
数组循环方法性能测试
发表于
JS
分类,标签:
12
12月
2019
/**##chrome 函数|耗时|数量----|----|---for|143ms|100000000for每次取length|1323ms|100000000each|36ms|100000000forEach|1150ms|100000000every|1160ms|100000000filter|1172ms|100000000map|1183ms|100000000some|1161ms|100000000reduce|1197ms|100000000reduceRight|1174ms|100000000from|11837ms|100000000concat|0ms|100000000slice|1311ms|100000000splice|4946ms|100000000*//**##...
如何获取浏览器滚动条的大小
发表于
JS
分类,标签:
06
09月
2019
<!DOCTYPEhtml><html><head> <metacharset="UTF-8"> <title>获取浏览器滚动条的大小</title></head><body> <buttononclick="getScrollBarSize()">获取滚动条的大小</button> <script> functioncountScrollBarSize(){ varele...
ie 滚动条的样式
发表于
html5
分类,标签:
06
09月
2019
ie滚动条的样式支持的属性有以下属性scrollbar-base-color-滚动条背景色自动调整其他颜色scrollbar-face-color-滚动条背景色scrollbar-highlight-color-滑道背景色scrollbar-track-color此属性也能调整滑道背景色scrollbar-shadow-color-滚动条边框颜色scrollbar-arrow-color-箭头颜色、使用实例: .test{scrollbar-base-color:red;} .test{scrollbar-face-color:red;} .test{scrollbar-highlight-color:#f00;} || .test{scrollbar-track-color:red;} .test{scroll...
chrome下调整滚动条样式
发表于
html5
分类,标签:
06
09月
2019
<!DOCTYPEhtml><html><head> <metacharset="UTF-8"> <title>Title</title> <style> .fd-scroll{ width:1000px; height:...