1.滚动条兼容性
-
overflow-y未超出仍然显示滚动条解决办法
p {
max-height: 100px;
overflow-y: scroll;
}
效果：即使不超过这个高度，也会出现右边的滚动条，显然不是想要的（windows 上的IE 和 Firefox 亲测）；不超过这个高度，不出现右边的滚动条（mac 上 Chrome Firefox 亲测）。
改进如下：
p {
max-height: 100px;
overflow-y: auto;
}
效果是：不超过最大高度，不显示滚动条，超过则出现滚动条。（windows和mac 亲测）
-
获取/设置scrolltop兼容各浏览器的方法
- 页面具有 DTD，或者说指定了 DOCTYPE 时，使用 document.documentElement。
- 页面不具有 DTD，或者说没有指定了 DOCTYPE，时，使用 document.body。
在 IE 和 Firefox 中均是如此。
为了兼容，不管有没有 DTD，可以使用如下代码：
var scrollTop = window.pageYOffset //用于FF Safari
|| document.documentElement.scrollTop
|| document.body.scrollTop
2.文字渐变色
css文字渐变写法
background: linear-gradient(to right, #416CF8, #EC55FF);
background: -webkit-linear-gradient(to right, #416CF8, #EC55FF);
background: -o-linear-gradient(to right, #416CF8, #EC55FF);
background: -moz-linear-gradient(to right, #416CF8, #EC55FF);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
特殊情况：
1.Safari浏览器中，wap端会出现渐变色的竖线
原因：父元素tansform的translate样式的影响，移动会影响到
解决：mobile端不使用translate样式
.parent {
top: 41%;
left: 59%;
transform: translate(-50%, -50%);
@media screen and (max-width:768px) { // mobile
transform: none;
top: 24%;
left: calc(50% - 295px/2);
}
}
在IE浏览器中不支持这种写法，可以使用svg在IE浏览器中实现文字渐变效果
<svg class="gbt-svg">
<defs>
<!-- x1-x2：x transform y1-y2：y transform -->
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#416CF8; stop-opacity:1" />
<stop offset="100%" style="stop-color:#EC55FF; stop-opacity:1" />
</linearGradient>
</defs>
<!-- text center -->
<text x="50%" y="50%" text-anchor="middle" alignment-baseline="middle" fill="url(#grad)" class="gbt-svg-text">{{ $t('becomeMember') }}</text>
<!-- <text x="50%" y="50%" text-anchor="middle" alignment-baseline="middle" style="fill:url(#grad)" class="gbt-svg-text">{{ $t('becomeMember') }}</text> -->
</svg>
<text>的css写法:
.gbt-svg-text {
fill: url(#id);
// fil: #f00;
}
非IE浏览器还是用css实现字体渐变色，由于不同浏览器的字体大小、行高，svg需要指定宽高问题，需要针对浏览器对svg样式微调，比较复杂
最终，chrome采用css，IE采用svg
// IE浏览器判断
var isIE11 = navigator.userAgent.indexOf('Trident') > -1
3.浏览器判断
export const isChrome = () => {
const isChromium = window.chrome;
const winNav = window.navigator;
const vendorName = winNav.vendor;
const isOpera = typeof window.opr !== 'undefined';
const isIEedge = /Edge|Edg|EdgiOS/.test(winNav.userAgent);
const isIOSChrome = winNav.userAgent.match('CriOS');
if (isIOSChrome) {
// is Google Chrome on IOS
return 'iOSChrome';
} else if (
isChromium !== null &&
typeof isChromium !== 'undefined' &&
vendorName === 'Google Inc.' &&
isOpera === false &&
isIEedge === false
) {
return 'chrome';
} else {
return false;
}
};
export const isSafari = () => {
return /^((?!chrome|android).)*safari/i.test(window.navigator.userAgent);
};
export const isChinaBrowser = () => {
const UA = window.navigator.userAgent.toLowerCase();
if (is360() && isChrome()) {
return true;
}
if (
UA.indexOf('qqbrowser') > -1 ||
UA.indexOf('ucbrowser') > -1 ||
UA.indexOf('ubrowser') > -1 ||
UA.indexOf('baidu') > -1 ||
UA.indexOf('se') > -1 ||
UA.indexOf('aoyou') > -1 ||
UA.indexOf('maxthon') > -1 ||
UA.indexOf('greenbrowser') > -1 ||
UA.indexOf('liebao') > -1 ||
UA.indexOf('lbbrowser') > -1
) {
return true;
}
return false;
};
export const is360 = () => {
const is360 = _mime('type', 'application/vnd.chromium.remoting-viewer') || !navigator.userActivation;
function _mime(option, value) {
var mimeTypes = navigator.mimeTypes;
for (var mt in mimeTypes) {
if (mimeTypes[mt][option] == value) {
return true;
}
}
return false;
}
return is360;
};
export const getBrowserType = () => {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
return 'weixin';
} else if (ua.match(/QQ/i) == 'qq') {
if (ua.match(/MQQBrowser/i) == 'mqqbrowser') {
return 'QQ';
} else {
return 'QQ-Build-In';
}
} else if (ua.match(/Baidu/i) == 'baidu') {
return 'Baidu';
}
return '';
};
var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
参考地址：
html - JavaScript: How to find out if the user browser is Chrome? - Stack Overflow
4.系统判断
navigator.platform
已弃用：不再推荐此功能。虽然一些浏览器可能仍然支持它，但它可能已经从相关的 Web 标准中删除，可能正在被删除，或者可能只是为了兼容性目的而保留。避免使用它，并尽可能更新现有代码；请参阅本页底部的兼容性表以指导您的决定。请注意，此功能可能随时停止工作。
注意：推荐的替代此属性的是NavigatorUAData.platform，它是从 返回的Navigator.userAgentData。
navigator.userAgentData.platform 支持的浏览器：Chrome、Edge、Opera，大多数不支持 弃用
navigator.userAgent 使用
使用navigator.platform进行判断：
let appVersion = window.navigator.appVersion;
let platform = window.navigator.platform;
if (appVersion.indexOf("Android") > -1) {
return "android";
} else if (
appVersion.indexOf("iPhone") > -1 ||
appVersion.indexOf("iPod") > -1 ||
appVersion.indexOf("iPad") > -1
) {
return "ios";
}
if (platform.indexOf("Linux") > -1) {
return "linux";
} else if (appVersion.indexOf("Mac") > -1) {
return "mac";
} else if (appVersion.indexOf("Win") > -1) {
return "windows";
} else if (appVersion.indexOf("X11") > -1) {
return "unix";
} else {
return "default system";
}
使用navigator.userAgent判断：
const u = navigator.userAgent;
if (u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 || u.indexOf('XiaoMi') > -1 || u.indexOf('Linux') > -1;) {
return 'andriod';
} else if (!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
return 'ios'
} else if (u.toUpperCase().indexOf('MAC') >= 0) {
return 'mac'
} else if (u.toUpperCase().indexOf('WIN') >= 0) {
return 'win'
} else if (u.toUpperCase().indexOf('ANDROID') === -1 && u.toUpperCase().indexOf('LINUX') >= 0) {
return 'linux'
} else {
return 'default system'
}
参考地址：
Navigator.platform - Web APIs | MDN
Navigator.userAgentData - Web APIs | MDN
![一场春雨，一个带着泥土芬芳的记忆[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)