浏览器兼容性

本文转载于: 猿2048 网站➫ https://www.mk2048.com/blog/blog.php?id=hhibijakaa 前言 有过面试经验的同学应该都被问过浏览器兼容性的问题，对于面试官的问题，常常猝不及防，因为通常他们都是这么问的。"来谈谈浏览器兼容的问题吧"，"你对浏览器的兼容性有了解过吗"，那么如何才是我们正确回答这个问题的姿势呢。 虽然面试官的问题十分的笼统，浏览器的兼容性无非还是样式兼容性（css），交互兼容性（javascript），浏览器 hack 三个方面。 样式兼容性（css）方面 因为历史原因，不同的浏览器样式存在差异，可以通过 Normalize.css 抹平差异，也可以定制自己的 reset.css，例如通过通配符选择器，全局重置样式 * { margin: 0; padding: 0; } 在CSS3还没有成为真正的标准时，浏览器厂商就开始支持这些属性的使用了。CSS3样式语法还存在波动时，浏览器厂商提供了针对浏览器的前缀，直到现在还是有部分的属性需要加上浏览器前缀。在开发过程中我们一般通过IDE开发插件、css 预处理器以及前端自动化构建工程帮我们处理。 浏览器内核与前缀的对应关系如下 内核 主要代表的浏览器 前缀 Trident IE浏览器 -ms Gecko Firefox -moz Presto Opera -o Webkit

问题症状：随便写几个标签，不加样式控制的情况下，各自的margin和padding差异较大。 碰到频率：100% 解决方案：初始化CSS的默认样式，*{margin:0;padding:0}。也可以使用其他网站的初始化代码。 备注：这个是最常见的也是最容易解决的一个浏览器兼容性问题。 问题症状：常见的是IE6中后面的一块被顶到下一行。 碰到频率：90% 解决方案：在float的标签样式控制中加入display:inline；将其转化为行内属性。 问题症状：IE6、IE7和遨游浏览器里这个标签的高度不受控制，超出自己设置的高度。 碰到频率：60% 解决方案：给超出高度的标签设置overflow：hidden；或者设置行高line-height小于你设置的高度。 问题症状：IE6里的间距比超过设置的间距。 碰到频率：20% 解决方案：在display：block；后面加入display：inline；display：table； 问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了margin：0；和padding：0也不起作用。 碰到频率：20% 解决方案：使用float属性为img布局。 问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容。 碰到频率：20% 解决方案

在这里总结一下css布局时常见的浏览器兼容性问题 1 盒模型 IE6的盒模型和W3C标准的盒模型不同 W3C中的盒模型所定义的宽度和高度为内容区域的宽度和高度 但是盒模型的总大小为margin+border+padding+width IE的盒模型所定义的宽度和高度为盒模型的总宽度和总高度，width=margin+border+padding+content-width css3中box-sizing定义了盒模型的类型，其有两个值：centent-box（W3C）和border-box（IE6） 另外，W3C盒模型中div的背景颜色充满了padding和border区域，border透明时，可发现背景颜色就是div的bgcolor（包括border的部分）.（ie6不支持透明transparent） IE盒模型中的div背景颜色包括padding和border区域 2. input元素默认样式表现形式的不同 文本框 IE格式下的文本框 chrome格式下的文本框 我们可以发现IE格式下的文本框多了个叉叉，如果想删除该叉叉，可以使用input的伪元素 input::-ms-value { padding: 4px; } input::-ms-clear{ display: none; } 密码 当input的类型为password时，ie和其他浏览器的显示方式不同

一、大前提，你必须安装必备的环境 　　 node.js 　　安装cnpm解决下载卡顿 　　　　命令： npm install - g cnpm -- registry = https :// registry . npm . taobao . org 　　　　查看官网api： https://www.gulpjs.com.cn/docs/getting-started/quick-start/ 　　安装gulp 　　　　查看官网api：npm install --global gulp-cli 　　　　查看官网api： https://www.gulpjs.com.cn/docs/getting-started/quick-start/ 　　查看环境 　　　　 二、开始： cnpm init cnpm install --save-dev gulp 创建gulpfile.js文件 let gulp = require('gulp'), sass = require('gulp-sass'),//sass转css插件 auto = require('gulp-autoprefixer');//解决浏览器兼容问题的插件 gulp.task('sass', function(){ return gulp.src('sass/*')//需要编译的文件目录 .pipe(sass(

CSS兼容技巧 1: FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会. 可用important解决 　　2: 居中问题. 　　 1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过vertical-align: middle.( 注意内容不要换行.) 　　 2).水平居中. margin: 0 auto;(当然不是万能) 　　3: 若需给 a 标签内内容加上样式, 需要设置 display: block;(常见于导航标签) 　　4: FF 和 IE 对 BOX 理解的差异导致相差 2px,还有设为 float的div在ie下 margin加倍等问题. 　　5: ul 标签在 FF 下面默认有list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表) 　　6: 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应. 　　7: 关于手形光标. cursor: pointer. 而hand 只适用于 IE. 8: 针对firefox ie6 ie7的css样式 1:现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示， 　　2:但是ie7对

window.pageXOffset/pageYOffset x轴/y轴 滚动距离 IE8及以下不兼容 IE8 及以下浏览器 支持 兼容性比较混乱 用时取2个值相加，因为两个值不可能同时存在 一个存在，另一个必然为0 document.body.scrollLeft/scrollTop document.documentElement.scrollLeft/scrollTop 封装 兼容滚动条方法 function getScrollOffset ( ) { if ( window . pageXOffset ) { return { x : window . pageXOffset , y : window . pageYOffset } } else { return { x : document . body . scrollLeft + document . documentElement . scrollLeft , y : document . body . scrollTop + document . documentElement . scrollTop } } } 来源： https://blog.csdn.net/weixin_42448623/article/details/102754674

移动端兼容性问题解决方案 转 https://www.cnblogs.com/wu-web/p/7866963.html 1. IOS移动端click事件300ms的延迟响应 移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的, 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。 双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。 原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接<a href="#"></a>，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作

FE-interview 个人收集的前端知识点、面试题和答案，参考答案仅代表个人观点，方便复习，目录如下，通过文档内搜索目录可快速定位章节 $HTML， HTTP，web 综合问题 常见排序算法的时间复杂度,空间复杂度 前端需要注意哪些 SEO 合理的 title、description、keywords：搜索对着三项的权重逐个减小，title 值强调重点即可，重要关键词出现不要超过 2 次，而且要靠前，不同页面 title 要有所不同；description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同；keywords 列举出重要关键词即可 语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网页 重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取 重要内容不要用 js 输出：爬虫不会执行 js 获取内容 少用 iframe：搜索引擎不会抓取 iframe 中的内容 非装饰性图片必须加 alt 提高网站速度：网站速度是搜索引擎排序的一个重要指标 web 开发中会话跟踪的方法有哪些 cookie session url 重写 隐藏 input ip 地址 <img> 的 title 和 alt 有什么区别 title 是 global

1. 文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff 下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要，在高度上我们不能容忍1px 的差异。 2.ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。 3.横向上的撑破容器问题，。如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义width。 小实验：有兴趣大家可以看看这段实验。在不同浏览器下分别测试以下各项代码。 a.<div style=”border:1px solid red;height:10px”></div> b. <div style=”border:1px solid red;width:10px”></div> c. <div style=”border:1px solid red;float:left”></div> d. <div style=”border:1px solid red

为自己也为你努力的第一天 大体思路： 1、 确定运行在哪些浏览器，以及运行最低版本。 2、 确定在这些版本上有哪些兼容问题需要去处理-这个不需要自已取摸索，前人总结了很多啦 3、 兼容问题有没有前人整理过的直接可以使用的类库及注意点 具体： 1.可用normalize.css等，它已经解决了大部分兼容性问题；参考normalize源码，看解决了哪些兼容性问题： https://github.com/necolas/normalize.css/blob/master/normalize.css 2.具体问题具体解决，实在不行，就使用css hack 参考文章： https://blog.csdn.net/dayu9216/article/details/70225261 来源： https://www.cnblogs.com/celine-huang/p/11512044.html