level-13
如何调试IE浏览器
1.打开IE浏览器，F12打开开发者模式。（针对IE7及以上）
2.针对IE6浏览器。使用虚拟机或者用ietester
什么是CSS hack？在 CSS 和 HTML里如何写 hack？在 CSS 中 ie6、ie7的 hack 方式？
由于不同厂商的浏览器，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 而`CSS hack`是利用浏览器漏洞来让不同浏览器显示效果一致，我们把针对不同的浏览器/不同版本写相应的`CSS code`的过程，叫做`CSS hack`；
CSS hack的基本四种方法：
- ie条件注释法
只在IE下生效
<!–[if IE]>
这段文字只在IE浏览器显示
<![endif]–>
只在IE6下生效
<!–[if IE ]>
这段文字只在IE6浏览器显示
<![endif]–>
只在IE6以上版本生效
<!–[if gte IE ]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]–>
只在IE8上不生效
<!–[if ! IE ]>
这段文字在非IE8浏览器显示
<![endif]–>
非IE浏览器生效
<!–[if !IE]>
这段文字只在非IE浏览器显示
<![endif]–>
- 属性前缀
_和-只对ie6有效；
*对ie6,7有效；
\9对ie11以下所有ie有效；
\0对ie8,9,10有效；
\9\0只对ie9,10有效；
\0\9只对ie8,9有效；
- 选择器前缀法：
* 前缀只对IE6有效；
*+ 前缀只对IE7有效；
列举几种 浏览器兼容问题
1.ie6,7下块级元素float浮动后的双边距bug。
2.ie6、7不支持display:inline-block;
3.ie6中块级元素不支持：hover属性
针对兼容、多浏览器覆盖有什么看法？渐进增强和优雅降级是什么意思？
并不是覆盖越多的浏览器越好，要考虑付出和收益比。考虑的维度可以有
- 浏览器使用用户的比例情况及（各个浏览器的市场占用率）
- 项目关键人使用浏览器习惯
- 客户使用浏览器习惯
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
reset.css和normalize.css分别是做什么的？为什么推荐使用 nomalize.css?
reset.css是统一将所有元素的默认样式格式化。比较暴力，不管你以前是什么样子，统统变成一个样子，元素的默认样式都会去掉。
nomalize.css相当于改良派，提倡是保留有用的元素默认样式，需要什么元素变成什么样子的时候再对其进行调整。并对不同浏览器的兼容进行了优化，在可维护性和易用性上表现较好，因此推荐使用nomalize.css。
操作：
下的虚拟机装系统装错了。里面浏览器不是ie6的。
就用的IE那个开发者模式 测试的。
测试代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
border:50px solid red;
width:100px;
height:100px;
padding:50px;
margin:50px;
}
.box3,.box2{
display: inline-block;
}
.box4{
max-width:300px;
height:100px;
background:red;
margin:0px auto;
}
</style>
</head>
<body>
<div class="box1">盒模型</div>
<div class="box2">你好</div>
<div class="box3">世界</div>
<div class="box4">max-width:300px</div> </body>
</html>
IE7下的情况：
IE8下的情况：
IE5下的情况
找不到IE6的浏览器 测试了下IE5的 是感觉大不一样。。。。
百度了一下
是因为一般情况下IE6下面的和模型就是怪异模式？
怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核的浏览器。
在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）
当不对doctype进行定义时，会触发怪异模式。
另外，可以通过触发hasLayout，使IE6进入正常的解析模式当中，如设置css属性zoom:1
另外inline-block不支持IE6、7
max-width:只支持IE7以上的
level-13的更多相关文章
- [译]Stairway to Integration Services Level 13 - SSIS 变量回顾
介绍 在前一篇中我们组合了已经学过的事件冒泡 event bubbling, 日志记录 logging, 和父子模型 Parent-Child pattern 建立了自定义的SSIS包日志记录. 本文 ...
- 《VIM-Adventures攻略》 LEVEL 1-3
此文已转至http://cn.abnerchou.me/2014/03/04/e40e2146/ 上期有人提到此游戏烂尾.其实没有啦,作者是位"贪财"的主,不付费不给玩剩下的章节. ...
- Natas Wargame Level 13 Writeup（文件上传漏洞，篡改file signature，Exif）
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAqMAAADDCAYAAAC29BgbAAAABHNCSVQICAgIfAhkiAAAIABJREFUeF
- 百度地图-省市县联动加载地图 分类： Demo JavaScript 2015-04-26 13:08 530人阅读 评论(0) 收藏
在平常项目中,我们会遇到这样的业务场景: 客户希望把自己的门店绘制在百度地图上,通过省.市.区的选择,然后加载不同区域下的店铺位置. 先看看效果图吧: 实现思路: 第一步:整理行政区域表: 要实现通过 ...
- 版本和API Level对照表
版本和API Level对照表 Code name Version API level (no code name) 1.0 API level 1 (no code name) 1.1 API le ...
- Android 系统名字、版本、API level的对应关系
从官网上找到的,具体地址是: http://source.android.com/source/build-numbers.html Code name Version API level Lolli ...
- 最新Android的SDK版本与API Level的对应关系
Android 7.1.1 API Level 25 Android 7.0 ...
- 【XSS-labs】Level 11-15
Level 11 和level 10 差不多的页面,传参后查看页面源代码:依旧是第3个可以正常传参. 尝试level 10 的payload 发现 " 被实体化 可以打开控制台将第三个inp ...
- Android SDK 与API版本对应关系
Android SDK版本号 与 API Level 对应关系如下表: Code name Version API level (no code name) 1.0 API level 1 ( ...
- JavaScript高级编程 (1) - javscript是什么
<重温javascript>这是一系列 javascript 的学习笔记,部分内容摘自书本或者网络,我这里只是基于自己的理解进行了梳理整理. 一个完整的 javscript 实现是由以下3 ...
随机推荐
- 《C语言及程序设计》实践參考——分数的累加
返回:贺老师课程教学链接 项目要求 [项目1:分数的累加]编程序.输出1/3-3/5+5/7-7/9-+19/21的结果提示:假设直接解决上面的问题有困难.能够设计一条"由易到难" ...
- input file reader
研究过程中关于本主体的相关参考 好文:https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/ 好文:http: ...
- 线段树lazy标记??Hdu4902
Nice boat Time Limit: 30000/15000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) To ...
- Duilib教程－非DUI控件
DUILIB并不是真正的DUI,至少有部分控件不是完全DUI的.其实包括: 1.EDIT. 它的实现原理是,CEditUI包含一个窗口CEditWnd,流程如下: 1)鼠标单击,创建窗口见 EditU ...
- 1.2_php验证码
使用php生成动态的验证码图片 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- 不固定宽度的div居中显示
对于div的居中 ,如果是有固定宽高的,可以加margin:auto;水平垂直居中,但如果是不固定宽高,又想让div居中的话,这种方式都可能不奏效,达不到想要的效果. 有两种方法:1.加display ...
- 160727、自定义hibernate主键生成策略生成字符串+数字自增长
需求:需要自增长注解如MyId0001.MyId0002.MyId0003 实现:实现这个接口org.hibernate.id.IdentifierGenerator 一.MyIdGenerator. ...
- GIT界的神探--bisect
GIT界的神探--bisect 今天我们需要使用git命令中的bisect破获一起凶杀案,下面请看具体案件: 在一个git仓库中有a,b,c,d,e,f,g,h,i,j,k这几个提交,在k提交中发现软 ...
- 浅谈数据库并发控制 - 锁和 MVCC
在学习几年编程之后,你会发现所有的问题都没有简单.快捷的解决方案,很多问题都需要权衡和妥协,而本文介绍的就是数据库在并发性能和可串行化之间做的权衡和妥协 - 并发控制机制. 如果数据库中的所有事务都是 ...
- ORACLE的测试用户Scott
Oracle数据库的测试用户Scott的密码为什么是Tiger? 1977年6月,Larry Ellison 与 Bob Miner 和 Ed Oates 在硅谷共同创办了一家名为软件开发实验室(So ...