web前端面试题整理（前端和计算机相关知识）

1. 你能描述一下渐进增强和优雅降级之间的不同吗?

定义:
优雅降级（ graceful degradation): 一开始就构建站点的完整功能，然后针对浏览器测试和修复
渐进增强（ progressive enhancement): 一开始只构建站点的最少特性，然后不断针对各浏览器追加功能。  
都关注于同一网站在不同设备里不同浏览器下的表现程度

区别:
“ 优雅降级 ” 观点认为应该针对那些最高级、最完善的浏览器来设计网站 . 而将那些被认为 “ 过时 ” 或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE 、 Mozilla 等）的前一个版本。
“ 渐进增强 ” 观点则认为应关注于内容本身。请注意其中的差别：我甚至连 “ 浏览器 ” 三个字都没提。

理解:
" 优雅降级 " 就是首先完整地实现整个网站 , 包括其中的功能和效果 . 然后再为那些无法支持所有功能的浏览器增加候选方案 , 使之在旧式浏览器上以某种形式降级体验却不至于完全失效 .
" 渐进增强 " 则是从浏览器支持的基本功能开始 , 首先为所有设备准备好清晰且语义化的 html 及完整内容 , 然后再以无侵入的方法向页面增加无害于基础浏览器的额外样式和功能 . 当浏览器升级时 , 它们会自动呈现并发挥作用 .


2. 浏览器兼容问题:

问题1    不同浏览器的标签默认的外补丁和内补丁不同 .
即随便写几个标签 , 在不加样式控制的情况下 , 各自的 margin 和 padding 差异较大 .
解决方法 : CCS 里 :   *{margin:0;padding:0}

问题2    块属性标签 float 后，又有横行的 margin 情况下，在 IE6 显示 margin 比设置的大　　
会使得 ie6 后面的一块被顶到下一行 .
解决方案 : 在 float 的标签样式中加入 display: inline; 将其转化为行内属性

问题3    设置较小高度标签（一般小于 10px ），在 IE6 ， IE7 ，遨游中高度超出自己设置高度
IE6 、 7 和遨游里这个标签的高度不受控制，超出自己设置的高度
解决方案 : 给超出高度的标签设置 overflow:hidden; 或者设置行高 line-height 小于你设置的高度
原因 : ie8 之前的浏览器都会给标签一个最小默认的行高的高度 . 即使标签是空的 , 这个标签的高度还是会达到默认的行高 .

问题4    行内属性标签，设置 display:block 后采用 float 布局，又有横行的 margin 的情况， IE6 间距 bug
解决 : 在 display:block; 后面加入 display:inline;display:table;

问题5    图片默认有间距
几个 img 标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。
解决 : 使用 float 属性为 img 布局

问题6    标签最低高度设置 min-height 不兼容
因为 min-height 本身就是一个不兼容的 CSS 属性，所以设置 min-height 时不能很好的被各个浏览器兼容
如果我们要设置一个标签的最小高度 200px ，需要进行的设置为： {min-height:200px;height:auto !important; height:200px; overflow:visible;}

问题7    透明度的兼容 CSS 设置
使用 hacker
IE6 认识的 hacker 是下划线 _ 和 *
IE7, 遨游认识的 hacker 是 *

问题8   IEol 的序号全为 1, 不递增
解决 : li 设置样式 {display: list-item}

问题9   ie6,7 不支持 display:inline-block
解决方法 : 设置 inline 并触法 haslayout

display:inline-block; *display:inline; *zoom:1

需要web前端课程工具和电子书，可以加: 33群105601600(22群已满员，请关注新群）

【内容展示有限，可以加群下载，群文件会定期更新学习资料，以及练手小案例】