很多朋友对于使用谷歌浏览器面试和谷歌浏览器面试别人听不到你的声音不太懂，今天就由小编来为大家分享，希望可以帮助到大家，下面一起来看看吧！

本文目录

1. 前端面试题之解决浏览器兼容性的方案
2. Web前端岗位面试题有哪些
3. web美工的面试题

一、前端面试题之解决浏览器兼容性的方案

浏览器兼容性涉及的内容有很多，特别是针对IE浏览器，以下整理出五种常见的浏览器兼容性解决方法。

由于各大浏览器会有自身的默认样式，并且不尽相同，所以为了尽可能的保证样式的统一性，前端在开发项目之前都会先进行样式格式化，最常见的分为以下几个方面。

1.pandding值和 margin值均设置为 0

将html、body、a、li、ol、input、textarea、select、button等标签的 padding值和 margin值设置为 0。

设置统一的字体，如果使用 rem单位，则 html需要设置合适的字号。

设置统一的颜色，将 text-decoration属性设置为 none。

5.input、textarea、select、button等标签初始化

二、使用不同类型的浏览器内核前缀

1.Chrome（谷歌浏览器）与 Safari（苹果浏览器）内核：Webkit（中译无）前缀：-webkit-

2.IE（IE浏览器）内核：Trident（中译三叉戟）前缀：-ms-

3.Firefox（火狐浏览器）内核：Gecko（中译壁虎）前缀：-moz-

4.Opera（欧朋浏览器）内核：Presto（中译迅速）前缀：-o-

-webkit-border-radius: 10px;/谷歌浏览器/

-ms-border-radius: 10px;/ IE浏览器/

-moz-border-radius: 10px;/火狐浏览器/

-o-border-radius: 10px;/欧朋浏览器/

三、针对IE浏览器不同版本的解决方案

1.对于低版本的 IE浏览器使用 CSS hack（即给特点前缀）

注：以下符号是写在属性名前面。

兼容 IE6、7的 hack符号：`~!@#$% ^&*()+= [ ]|<>,.任意一个符号

注：以下符号是写在属性值与分号直接，中间不留空格。

兼容 IE8、9、10的 hack符号：\0

兼容 IE6、7、8、9、10的 hack符号：\9

.border-radius: 10px;/ IE6\7\8/

border-radius: 10px\0/;/ IE8/

border-radius: 10px\0;/ IE8\9\10/

border-radius: 10px\9;/ IE6\7\8\9\10/

2.为不同的版本编写独立的样式，其他浏览器识别不到。

例：大于 IE9的浏览器使用这个单独的 style9.css样式

例：只有 IE6浏览器使用的 style6.css样式

1.cursor属性的 hand值和 pointer值

问题：firefox浏览器不支持 hand值，但其他浏览器均支持 pointer值。

解决:统一使用 cursor属性的 pointer值。

问题：IE8及IE8以下版本浏览器不可通过设置 margin:0 auto实现水平居中。

解决:可通过设置父级 text-align:center实现。

问题：IE8及IE8以下版本浏览器不支持属性值“inherit”。

解决：谨慎使用属性值“inherit”。

问题：IE11不支持箭头函数、class语法等（报 SCRIPT1002:语法错误），不支持 Set和 Map数据结构（不报错）及 Promise对象，支持 let和 const，IE10及以下不支持任何 ES6语法。

解决：如果要兼容IE浏览器的项目请使用 ES5语法或者使用 Babel进行转换。

问题：IE9及 IE9以下版本浏览器，不能操作 tr标签的 innerHTML属性。

解决：可以操作 td标签的 innerHTML属性。

问题：IE9及 IE9以下版本浏览器无法使用 Ajax获取接口数据。

解决：在使用 Ajax请求之前设置 jQuery.support.cors=true。

问题：IE8及 IE8以下版本浏览器 event对象只有 srcElement属性，没有 target属性。

解决：obj= event.target?event.target:event.srcElement。

问题：IE8及 IE8以下版本浏览器是用 attachEvent()方法，而其他浏览器是 addEventListener()方法。

解决：判断 IE浏览器版本，如果是 IE8及以下事件绑定则使用 attachEvent()方法，注意 attachEvent()方法的用法，第一个参数为“onclick”而不是“click”。并且没有第三个参数。

二、Web前端岗位面试题有哪些

1.对WEB标准以及W3C的理解与认识

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外

链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维

护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言

3.Doctype?严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

用于声明文档使用那种规范（html/Xhtml）一般为严格过度基于框架的html文档

加入XMl声明可触发，解析方式更改为IE5.5拥有IE5.5的bug

4.行内元素有哪些?块级元素有哪些?CSS的盒模型?

块级元素：div p h1 h2 h3 h4 form ul

行内元素: a b br i span input select

Css盒模型:内容，border,margin，padding

5.CSS引入的方式有哪些? link和@import的区别是?

前者无兼容性，后者CSS2.1以下浏览器不支持

Link支持使用javascript改变样式，后者不可

6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?

继承不如指定 Id>class>标签选择

7.前端页面有哪三层构成，分别是什么?作用是什么?

结构层 Html表示层 CSS行为层 js

选择器{属性1:值1;属性2:值2;……}

9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

Ie(Ie内核)火狐（Gecko）谷歌（webkit） opear(Presto)

1.双边距BUG float引起的使用display

2.3像素问题使用float引起的使用dislpay:inline-3px

3.超链接hover点击后失效使用正确的书写顺序 link visited hover active

4.Ie z-index问题给父级添加position:relative

6.Min-height最小高度！Important解决’

7.select在ie6下遮盖使用iframe嵌套

8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

11.标签上title与alt属性的区别是什么?

12.描述css reset的作用和用途。

Reset重置浏览器的css默认属性浏览器的品种不同，样式不同，然后重置，让他们统一

13.解释css sprites，如何使用。

Css精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

14.浏览器标准模式和怪异模式之间的区别是什么?

使用 window.top.document.compatMode可显示为什么模式

15.你如何对网站的文件和资源进行优化?期待的解决方案包括：

直观的认识标签对于搜索引擎的抓取有好处

17.清除浮动的几种方式，各自的优缺点

1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）

2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）

3.是用afert伪元素清除浮动(用于非IE浏览器)

1.javascript的typeof返回哪些数据类型

Object number function boolean underfind

2.例举3种强制类型转换和2种隐式类型转换?

强制（parseInt,parseFloat,number）

前者是切割成数组的形式，后者是将数组转换成字符串

4.数组方法pop() push() unshift() shift()

Unshift()头部添加 shift()头部删除

5.事件绑定和普通事件有什么区别

7.IE和标准下有哪些兼容性的写法

document.documentElement.clientWidth|| document.body.clientWidth

Var target= ev.srcElement||ev.target

8.ajax请求的时候get和post方式的区别

一个在url后面一个放在虚拟载体里面

应用不同一个是论坛等只需要请求的，一个是类似修改密码的

Object.call(this,obj1,obj2,obj3)

10.ajax请求时，如何解释json数据

使用eval parse鉴于安全性考虑使用parse更靠谱

function getStyle(obj,attr,value)

obj.getComputedStyle(attr,false)

让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

例子可见此链接

14.闭包是什么，有什么特性，对页面有什么影响

闭包就是能够读取其他函数内部变量的函数。

深入理解JavaScript的闭包特性如何给循环中的对象添加事件此链接可查看（问这个问题的不是一个公司）

16.添加删除替换插入到某个接点的方法

17.解释jsonp的原理，以及为什么不是真正的ajax

18.javascript的本地对象，内置对象和宿主对象

本地对象为array obj regexp等可以new实例化

内置对象为gload Math等不可以实例化的

宿主为浏览器自带的document,window等

19.document load和document ready的区别

Document.onload是在结构和样式加载完才执行js

Document.ready原生种没有这个方法，jquery中有$().ready(function)

一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

for(var i=0;i<arr.length;i++)

三、web美工的面试题

面试回答问题的思路是决定你是否可以留在用人单位的依据。那关于web美工的一些面试题是什么呢?下面是小编为你整理的web美工的一些面试题，希望对你有帮助。

Photoshop(PS)、Dreamweaver(DW)、Illustrator(AI)、Fireworks(FW)、CorelDraw(CDR)、Indesign(ID)、Flash等(以上为较常用软件)

2.目前常用的WEB标准静态页面语言是?

xHTML(高级一点的回答：现在HTML5也很火)

R指红色red，G指绿色green，B指蓝lue

4.网页经常用到的图片格式有几种?它们之间有什么不同点和用途?

Jpg是一种有损图片压缩格式，支持的颜色数量很多，适用于保存颜色较多且比较复杂的摄影图片或写实图像，且生成的文件体积较小;

Gif是一种无损图片压缩格式，最大支持256种颜色，支持透明，可保存动画，适用于保存颜色较简单的卡通图像;

Png是一种压缩算法优于gif的无损图片压缩格式，能在保证最不失真的`情况下尽可能压缩图像文件的大小，支持图像透明，不支持动画，只要不是需要动画效果的颜色较简单的图片，优先采用png格式输出。

5.在table标签中，tr指什么?，td指什么?

tr指表格中的一行，td指表格中的单元格。

6.在xHTML标准中，控制网页背景色的标记是什么?

7.让一个div层水平居中于浏览器窗口中，最简单的实现方法是?

为这个div层添加属性：style=”margin:0px auto“

两者都有换行的作用，但用br换行后不会空行，而p换行后会空一行，另起一个空的段落。

9.请列举出几大当下主流的浏览器，并说出你最喜欢的一个和最不喜欢的一个，说明原因?

IE、Chorme(谷歌浏览器)、FireFox(火狐浏览器)、Opera(欧朋浏览器)、Safari(苹果浏览器)【以上这5款是国际5大主流浏览器，比较专业的人员会回答出这5个。至于360浏览器、TT浏览器、猎豹浏览器、搜狗浏览器之流，都是基于Chorme内核编写的。】

【比较专业的人员，在回答最不喜欢的浏览器时会选IE6，因为IE6是一个很落伍的浏览器，BUG很多，对许多效果的支持性也很差;最喜欢的浏览器这个问题完全是仁者见仁智者见智，能自圆其说即可。】

10.网页中的文字小于多少像素就会开始影响识别?

11.设置一个链接在新窗口打开的方法是?

为链接添加”target=”_blank”属性

12. CSS中的id标签和class标签，哪个定义的级别高?

13. CSS样式表的三种使用方法分别是?

外部连接式：在网页头部使用链接引入一个外部的CSS样式表。举例：

内部级联式：在当前网页头部直接书写一个CSS样式。举例：

直接嵌入式：直接在元素内部嵌入CSS样式。

14.为一个div层添加边框为2像素的黑色虚线边框效果的CSS代码是?(请使用直接嵌入式)

位图是由单个像素点组成的点阵图像，放大图像尺寸会使图像失真。位图能表现丰富的色彩、真实的画面，分辨率越高，图像质量越好;

矢量图是具有几何特性的图形，其基本组成单位是锚点和路径，无论放大多少倍画面都不会失真，矢量图绘制的物体不如照片表现得逼真，无法达到像照片一样丰富的画面效果，因此矢量图常用于制作标志、插图、图案等色块与线条特征比较明显的图形。

16.请列举出你所知道的PS抠图方法?

套索工具，快速蒙版，通道，魔棒工具，蒙版，钢笔工具，橡皮擦工具等【要求至少回答3种】

17.在PS中哪些命令可以调节图像的亮度?

亮度/对比度，曲线，色阶，高光/阴影

18.如果背景是黑色，那么字体用什么颜色能突出字体，且不显得刺眼?

字体颜色选择与黑色色系较为接近的颜色：

如#999999的灰色，#006699的靛蓝色等。

【不能选择纯白色，因为太刺眼】

19.要做一个主题为节能、环保的网页页面，你打算如何排版和用色?

【无标准答案，可自由发挥，只要言之有物，言之有理即可。回答要点：有视觉冲击力，醒目易识别，选用贴近自然的颜色(如绿色)和与自然环境相关的图像，突出绿色环保、高科技节能的特点】

20.为了使整个网站风格保持一致性，你会采取哪些措施?

【无标准答案，可自由发挥，只要言之有物，言之有理即可。回答要点：导航条统一，图像风格一致，色彩一致性，结构一致性】

OK，关于使用谷歌浏览器面试和谷歌浏览器面试别人听不到你的声音的内容到此结束了，希望对大家有所帮助。