兼容性解决
关注
分享
扫一扫
xyphf_和派孔明
全栈工程师，熟悉原生JavaScript、TypeScript、ES6、Webpack、VUE全家桶、JAVA SSM框架、Spring boot 、Spring cloud、MySql、Oracle、Linux等，可独立构建多页面、单页面应用项目。
展开
-
论小程序canvas载入图片安卓机不显示drawImage无效怎么办？
小程序canvas载入图片安卓机不显示drawImage无效原创 2023-02-21 09:54:50 · 1604 阅读 · 3 评论 -
抹平各个浏览器之间差异的插件，浏览器差异解决方案
npm install normalize.css --save安装好之后在main.js中引入import 'normalize.css'建立一个base.scss文件这里是在html上建立一个根字体大小，因为后期的自适应大小的计算是rem1rem的大小等于1个html根字体的大小1rem = 100px比如说：2rem = 2 * 100px = 200pxhtml { font-size: 100px;}在main.js中引入这个文...原创 2021-03-15 00:37:28 · 442 阅读 · 0 评论 -
常用的基础样式border.css和reset.css
如何解决移动端1px（1像素）问题border.css该css样式用于解决移动端1像素边框问题。问题分析：有些手机的屏幕分辨率较高，是2-3倍屏幕。css样式中border:1px solid red;在2倍屏下，显示的并不是1个物理像素，而是2个物理像素。为了解决这个问题，引入border.css是非常有必要的。@charset "utf-8";.border,.border-top,.border-right,.border-bottom,.border-left,.borde原创 2021-02-02 16:45:50 · 220 阅读 · 0 评论 -
Browserslist: caniuse-lite is outdated. Please run the following command: `npm update`
中途接手一个react项目，没有任何交接，没有原型和UI，只有源码，但是遇到一个巨恶心的问题，其中有一个页面本地npm start的时候正常运行，但是npm run build构建之后，运行构建后的文件，一直有一个页面显示的是白板，控制台和console都不报错。非常恶心，一直找不到原因。但是每次构建都会报这个Browserslist: caniuse-lite is outdated. Please run the following command: `npm update`npm原创 2020-10-23 09:16:22 · 8953 阅读 · 0 评论 -
记一次z-idnex在safari下失效的处理方法
简单的说，在IOS safari下，如果父级元素用了css属性overflow，那么子元素的z-index属性就会失效，在PC chrome模拟器中是正常的，在手机真机上就会失效，处理办法使用translateZ属性处理原创 2020-07-19 23:39:19 · 369 阅读 · 0 评论 -
elementUI表格无数据显示图片
<el-table :data="tableData" border empty-text="当前数据没有，请添加数...原创 2019-08-15 21:17:49 · 4676 阅读 · 0 评论 -
面试题：写一个左中右布局占满屏幕，其中左右两块是固定宽度200 ， 中间自适应宽，要求先加载中间块，请写出结构及样式：
<div id="left">我是左边</div> <div id="center">我是中间</div><div id="right">我是右边</div>所以有了以下代码：css样式默认加载顺序样式表的元素选择器选择越精确，则其中的样式优先级越高： id选择器指定的样式 > 类选择器指定的...原创 2019-03-28 10:52:23 · 1776 阅读 · 0 评论 -
reset.css
/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, ...转载 2018-03-24 19:47:43 · 3377 阅读 · 2 评论 -
背景透明，文字不透明的做法
简单的说就是使用rgba的写法，如例所示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>文字透明，背景不透明</title><style>.div1{width:293px;height:219px;background:url(1.jpg) no-repeat;}.div2{widt原创 2016-09-19 01:09:43 · 643 阅读 · 0 评论 -
iphone手机safari输入法不支持keyup事件解决方法
问题是这样的，用input search做模糊搜索的时候，在键盘里面输入关键词，会通过ajax后台查询，然后返回数据，用input监听键盘keyup事件，在安卓手机是可以的，但是在ios手机自带的输入法无效，经过查询得出以下方法;起初我想到的是使用 JQ 里的 change，但是马上排除此方法，因为 change 是在文本框失去焦点时才会触发。曲线救国一下，想到用 keydown 来解决。在安卓一切原创 2016-09-18 17:38:29 · 4031 阅读 · 0 评论 -
各大网站CSS代码初始化集合
淘宝官网 样式初始化body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select, te转载 2016-09-05 10:14:17 · 497 阅读 · 0 评论 -
【插件】自适应布局JQuery插件，rem布局——和派孔明
JQ插件，JQ自适应插件，rem布局原创 2016-06-20 20:58:49 · 3287 阅读 · 0 评论 -
关于响应式布局的相关介绍——和派孔明
一、响应式布局简介 简单的讲，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。随着移动互联网的盛行，为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果， 设计师提出了响应式布局的设计方案。二、响应式布局的优点 面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题三、认识响应式布局 响应式布局又称之为媒体查询（Media Query），即通过不同的媒体类型和条件原创 2016-07-13 23:16:33 · 847 阅读 · 0 评论 -
animate.css动画库使用方法介绍
animate.css动画库简介 Animate.css是由Dan Eden的Daniel Eden使用CSS3的animation制作的动画效果的CSS集合。 它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。换句原创 2016-07-13 16:45:52 · 7852 阅读 · 0 评论 -
【兼容性解决】页面滚动距离document.documentElement.scrollTop兼容性问题
页面滚动距离兼容性解决*{ margin:0; padding:0; list-style:none; font-family: "微软雅黑","张海山锐线体简"}body{height:2000px;}#div1{width:100px;height:101px;background:red; position:fixed;right:0;bottom:0;}原创 2016-03-30 20:40:52 · 5907 阅读 · 0 评论 -
【兼容性问题解决】封装getByClass，getElementsByClassName IE低不兼容解决
getElementsByClassName IE低不兼容解决* {margin: 0;padding: 0;list-style: none;font-family: "微软雅黑", "张海山锐线体简"}div {height: 50px;background: #ccc;margin: 10px;}window.onload=func原创 2016-03-30 20:33:12 · 1352 阅读 · 0 评论