HTML+CSS结构中IE6BUG全集及解决方案
IE6兼容兼容心得(自己总结的)
文档类型2010年8月19日16:32使用以下DOCTYPE可使避免IE6进入怪异模式,不适用文档声明或使用HTML3以下的文档声明会是IE6进入向下兼容IE5的怪异模式DOCTYPE (Document Type) 文档类型，说明 XML 或者 (x)HTML 的版本。
DTD (Document Type Definitions) 文档类型定义，浏览器根据 DTD 来解释页面标识，并展现出来。
DOCTYPE 通常（但不总是）包含指定的DTD文件的URL。
浏览器一般不读取这些文件，而是只识别常见的 DOCTYPE 声明。
HTML 4.01 Transitional<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd">HTML 4.01 Frameset<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""/TR/html4/frameset.dtd">XHTML 1.0 Strict<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd">XHTML 1.0 Transitional<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">XHTML 1.0 Frameset<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""/TR/xhtml1/DTD/xhtml1-frameset.dtd">XHTML 1.1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""/TR/xhtml11/DTD/xhtml11.dtd">源文档</jennior/blog/item/79eb1dfa8922539c59ee9057.html>根据w3c关于stack level 的介绍可以得出以下stack level 规则父级stacking context的背景、边界1.z-index值为负值的定位元素（值越小越在下）2.文本流中非定位的block块级子元素3.脱float 块的文本4.文本流中非定位的float浮动子元素/文字元素5.脱块文本/行内元素6.z-index：auto/0的定位元素7.z-index值为正的定位元素（值越大越在上）8.每个stacking context都包括以下stack level （后来居上）：IE 6/IE7的规则父级stacking context的背景、边界1.z-index值为负值的定位元素（值越小越在下）2.脱块文本脱float 块文本(ie7)/行内元素3.未固定宽度文本流中非定位的block块级子元素4.固定宽度文本流中非定位的block块级子元素/文本流中非定位的、float浮动子元素/文字5.z-index：auto/0的定位元素6.z-index值为正的定位元素（值越大越在上）7.每个stacking context都包括以下stack level （后来居上）：垂直堆栈2010年8月20日10:58IE6/7技巧2010年8月24日12:35禁用IE6/7默认的垂直滚动条(Disabled IE default Vertical Scroll bar)默认情况下，即使内容适合窗口大小，IE(译注：IE6/7)也会显示垂直滚动条。
divcss网页的内容显示不完整的诊断
要减少内容，将显示不完整的内容去掉。
•
2、设置了css样式表属性overflow:hidden，隐藏超
出指定宽度、高度的对象
为什么在IE6中设置了高度也能显示完整，而在其它 浏览器中却显示不完整？
• 答：因为IE6内核的原因，你设置了高度，但你内容超出 设置高度，他将自然的撑破你设置的高度宽度，而在IE7、 IE8、火狐等浏览器中将不能撑破设置的高度。
•
当然如果你想你设置的内容再多也不撑破你设置的
高度宽度（包括IE6中），你可以在设置高度和宽度同时
再设置overflow:hidden属性样式，这样在IE6中也不会撑
破你设置高度和宽度。
分析造成原因
• 1、css中设置了高度
•
2、设置了css样式表属性overflow:hidden，隐藏超
出指定宽度、高度的对象-css隐藏。
解决方法
• 1、css中设置了高度
•
取消其对象的高度（height）css样式，即可兼容各
浏览器，内容也会显示完整。如果取消了高度让网页布局
左右内容板块边
兼容ie6的十条修复
我们知道ie会在一段时间内仍然流行，但是我们仍然可以支持浏览器并且避免hacks和条件css吗？这里有十条使用有效的html和css代码修复可以兼容ie6常见的问题。
1、使用一个声明你必须经常在html网页头部放置一个声明，推荐使用严格的标准。
例如或者xhtml使用最后你需要是ie6进入兼容模式，这已经足够兼容的了。
2、使用position: relative设置一个标签position: relative可以解决很多问题，特别是曾经有过看不见的经历或者奇怪布局的框架。
明显的，你需要小心，绝对位置放置的子元素是否都参照找到新位置。
3、为浮动元素使用display:inline浮动元素会有一个著名的ie6双边距margin bug。
假如你设置了左边距5px但实际上得到了10px左边距。
display:inline可以解决这个问题，尽管它不是必需的，但是css仍然有效。
4、设置元素启动hasLayout大部分ie6（ie7）的渲染问题都可以通过起来元素的hasLayout属性来兼容。
这是ie内置的设定，确定一个内容块相对其它内容块是有界限和位置的。
当你需要设置一个行内元素例如一个连接变成块状元素或者是透明效果，设置hasLayout也是必须的。
5、修复重复字符的bug复杂的布局会触发一个bug：浮动对象的最后字符会出现在已经清除浮动的元素后面。
这里有几种解决的办法，部分是理想的，并且一些测试和出错是必须的。
a、确保浮动元素都使用：display:inline；b、最后一个浮动元素使用margin-right:-3px;c、在浮动对象最后一个元素后使用一个条件注释。
例如这里输入注释…<![endif]d、在容器内的最后使用一个div空标签（它也必须设置90%宽度甚至更小）6、使用a标签完成可点击和hover原理Ie6只支持a标签的css定义hover效果你可以使用它去控制javascript启动的widgets，使得他们仍然保持键盘操作。
html常见基本问题
html常见基本问题1.代码为什么这样写结构？可读性好、语义明了、结构简单减少对类的设置、易于后台开发嵌套、方便以后对自己代码优化、还原设计图、对浏览器的兼容好。
2.为什么你的页面里面有DIV 和有UL li 之类的区分？一个html页需要有内容描述，html是被用来结构化信息的，例如标题、段落和列表等，因此有了div、title，p，li等标签之分，div是文档中的分隔符，块级元素，用div把网页分隔成块，使网页元素有格式化的效果，ul、li是列表项目，这样用就有很大的好处；减少了对类的设置、使语义更加清晰、更加方便CSS的定义等。
3.为什么要有公共样式？作用是什么？1.重置属性，统一浏览器解析的差异性；2.减少了css的重复代码、3.用到的CSS或html标签更加方便准确、4.统一整个网页的风格和样式。
4.为什么要清除浮动？clearfix的原理是什么？网上解释：一个块级元素的高度如果没有设置height，那么它的高度就是由里面的子元素来撑开的，如果子元素使用浮动，脱离了标准的文档流，那么父元素的高度会将其忽略，如果不清除浮动，父元素会出现高度不够，那样如果设置border或者background都得不到正确的解析。
因为浮动的特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0。
因此，需要闭合浮动元素，使其包含框表现出正常的高度。
clearfix的原理：通过给父元素加clearfix，设置css后使其在该元素后面添加空内容content：”.”;再通过设置clear:both;清除浮动，然后设置height:0;让内容占据空间不显示出来visibility: hidden;因为添加的content内容是inline元素，需要转化display:block;又因为ie6 ie7不支持:after伪元素，所以用.clearfix{*zoom:1;}让ie6 ie7的元素可以清除浮动来包裹内部元素。
2021年前端开发面试题及答案
When you can't fight daddy, you can only do it hard!整合汇编简单易用（WORD文档/A4打印/可编辑/页眉可删）前端开发面试题及答案1.Doctype?严格模式与混杂模式，如何触发这两种模式，区分它们有何意义?Doctype声明位于文档中的最前面的位置，处于标签之前。
此标签可告知浏览器文档使用哪种HTML或XHTML规范。
该标签可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的HTML文档。
当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。
为了实现这一点，他们创建了两种呈现模式：标准模式和混杂模式（quirksmode）。
在标准模式中，浏览器根据规范呈现页面，在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。
混杂模式通常模拟老式浏览器（比如MicrosoftIE4和NetscapeNavigator4）的行为以防止老站点无法工作。
浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。
如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。
对于HTML4.01文档，包含严格DTD 的DOCTYPE常常导致页面以标准模式呈现。
包含过渡DTD和URI 的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。
DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。
2.行内元素有哪些？块级元素有哪些？CSS的盒模型？行内元素有：abspanIbemimginputselectstrong块级元素有：divulollidldtddh1h2h3h4…p盒模型：marginborderpaddingwidth3.CSS引入的方式有哪些?link和@import的区别是?-1.使用LINK标签将样式规则写在.css的样式文件中，再以link标签引入。
CSS图片下面有间隙的6种解决方案
CSS图⽚下⾯有间隙的6种解决⽅案在进⾏页⾯的DIV+CSS排版时，遇到IE6（当然有时Firefox下也会偶遇）浏览器中的图⽚元素img下出现多余空⽩的问题绝对是常见的对於该问题的解决⽅法也是「见机⾏事」，根据原因的不同要⽤不同的解决⽅法，这⾥把解决直接把解决image图⽚布局下边的多余空隙的BUG的常⽤⽅法归纳，供⼤家参考。
1、将图⽚转换为块级对像即设置img为：display：block；在本例中添加⼀组CSS代码：#sub img {display:block;}IE6/7⽆效2、设置图⽚的垂直对齐⽅式即设置图⽚的vertical-align属性为「top，text-top，bottom，text-bottom」也可以解决。
如本例中增加⼀组CSS代码：#sub img {vertical-align:top;}3、设置⽗对象的⽂字⼤⼩为0px即，在#sub中添加⼀⾏： font-size:0;可以解决问题。
但这也引发了新的问题，在⽗对像中的⽂字都⽆法显⽰。
就算⽂字部分被⼦对像括起来，设置⼦对像⽂字⼤⼩依然可以显⽰，但在CSS效验的时候会提⽰⽂字过⼩的错误。
4、改变⽗对象的属性如果⽗对象的宽、⾼固定，图⽚⼤⼩随⽗对像⽽定，那麽可以设置： overflow:hidden; 来解决。
如本例中可以向#sub中添加以下代码： width:88px;height:31px;overflow:hidden;5、设置图⽚的浮动属性即在本例中增加⼀⾏CSS代码：#sub img {float:left;}如果要实现图⽂混排，这种⽅法是很好的选择。
6、取消图⽚标签和其⽗对象的最後⼀个结束标签之间的空格。
这个⽅法要强调下，在实际开发中该⽅法可能会出乱⼦，因为在写代码的时候为了让代码更体现语义和层次清晰，难免要通过IDE提供代码缩进显⽰，这必然会让标签和其他标签换⾏显⽰，⽐如说DW的「套⽤源格式」命令。
所以说这个⽅法可以供我们了解出现BUG的⼀种情况，具体解决⽅案的还得各位见招拆招了。
前端框架技术中常见的浏览器兼容性问题及解决方案
前端框架技术中常见的浏览器兼容性问题及解决方案在前端开发过程中，浏览器兼容性问题一直是一个头疼的难题。
由于不同浏览器的渲染引擎和规范解释存在差异，导致同样的前端代码在不同浏览器上可能会呈现不同的效果甚至出现错误。
为了提供用户一致的体验，我们需要了解并解决常见的浏览器兼容性问题。
一、CSS兼容性问题1. 盒模型差异Chrome、Firefox以及Safari使用的是W3C标准的盒模型，而IE使用的是传统的IE盒模型。
解决方案是使用CSS的box-sizing属性来明确指定所使用的盒模型。
```box-sizing: border-box; /*使用W3C的盒模型*/box-sizing: content-box; /*使用传统的IE盒模型*/```2. 浮动清除在IE6及其以前的版本中，浮动元素没有被正确的清除，可能会导致父容器的高度无法自适应。
解决方案是使用clearfix类或者在父容器上添加clear属性。
```.clearfix::after {content: "";display: table;clear: both;}```3. 层叠样式兼容性不同浏览器的CSS样式的优先级计算存在差异，可能导致样式覆盖问题。
解决方案是合理使用选择器和样式优先级，避免出现覆盖问题。
二、JavaScript兼容性问题1. DOM操作差异不同浏览器对于DOM操作的实现存在差异，可能导致相同的DOM操作代码在不同浏览器上出现错误。
解决方案是使用现代的DOM操作API，如querySelector、addEventListener等，或者使用框架提供的封装方法。
2. 事件处理不同浏览器对于事件处理的实现存在差异，可能导致事件处理代码在不同浏览器上有兼容性问题。
解决方案是使用框架提供的事件处理方法，如jQuery的事件处理方法，或者使用addEventListener来注册事件。
3. AJAX兼容性不同浏览器对于XMLHttpRequest对象的实现存在差异，可能导致AJAX代码在不同浏览器上无法正常工作。
浏览器不兼容原因及解决方案
无行贿犯罪承诺书
本人郑重声明，我（姓名）_________保证自己在的任何时间点和情况下不会参与任何行贿犯罪活动。
我意识到行贿犯罪对个人、团体和社会造成的损害，并深知行贿犯罪的道德、法律和社会影响。
我郑重承诺：
1. 我将以诚信和公正的原则为准则，绝不以金钱、物质或其他非法手段来获得不正当的利益或影响他人的决策。
2. 我将遵守国家法律法规和公司、组织的规定，对于任何行贿行为，我将主动举报，并不参与其中。
3. 我将积极加强自身的道德修养和职业操守，增强自己对行贿犯罪的认识和抵制能力。
4. 我将积极参与反腐败教育和宣传活动，向他人分享反腐败的知识和经验，共同宣传反行贿犯罪的价值。
5. 在我发现他人参与行贿犯罪活动的情况下，我将积极配合调查机关进行调查，并提供必要的证据和线索。
6. 我将密切关注反腐败工作的进展，支持并参与不同层面的反腐败工作，共同维护社会的公正和廉洁。
本人郑重承诺以上内容，一旦违反本承诺，愿意承担法律和道德上的责任。
如有违反上述承诺的行为，本人愿意接受法律制裁，并承担由此产生的一切后果和损失。
本承诺书有效期为永久有效。
如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器
如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器来源：互联网作者：佚名时间：07-27 11:46:58【大中小】点评：DOCTYPE 影响CSS 处理1.DOCTYPE 影响CSS 处理2.FF: div 设置margin-left, margin-right 为auto 时已经居中, IE 不行3.FF: body 设置text-align 时, div 需要设置margin: auto(主要是margin-left,margin-right) 方可居中4.FF: 设置padding 后, div 会增加height 和width, 但IE 不会, 故需要用!important 多设一个height 和width5.FF: 支持!important, IE 则忽略, 可用!important 为FF 特别设置样式6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高line-height:200px; 然后插入文字，就垂直居中了。
缺点是要控制内容不要换行7.cursor: pointer 可以同时在IE FF 中显示游标手指状，hand 仅IE 可以8.FF: 链接加边框和背景色，需设置display: block, 同时设置float: left 保证不换行。
参照menubar, 给 a 和menubar 设置高度是为了避免底边显示错位, 若不设height, 可以在menubar 中插入一个空格。
9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反，据阿捷的说法! important这个属性IE不能识别，但别的浏览器可以识别。
所以在IE 下其实解释成这样：div{maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx! important;11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:0;padding:0;}就能解决大部分问题注意事项：1、float的div一定要闭合。
html遇到的简单问题及解决方法
html遇到的简单问题及解决方法摘要：一、引言二、HTML基本概念1.HTML标签2.HTML元素3.HTML属性三、HTML遇到的简单问题1.标签不闭合2.标签顺序错误3.属性值错误4.字符编码问题四、解决方法1.使用HTML验证工具2.检查标签闭合3.检查标签顺序4.检查属性值是否正确5.统一字符编码五、实例演示六、总结正文：【引言】随着互联网的普及，越来越多的人开始接触和使用HTML来创建网页。
然而，即使是简单的HTML代码也可能遇到一些问题。
本文将介绍一些HTML 遇到的简单问题及解决方法，帮助大家更好地掌握HTML编程。
【HTML基本概念】HTML（超文本标记语言）是一种用于创建网页的标准标记语言。
在HTML中，有以下几个基本概念：1.HTML标签：用于划分网页的不同区域，如标题、段落、列表等。
2.HTML元素：由开始标签和结束标签组成，如`<p>`表示一个段落元素。
3.HTML属性：用于设置元素的属性值，如`class="example"`表示为一个元素设置class属性值为"example"。
【HTML遇到的简单问题】在编写HTML代码时，可能会遇到以下简单问题：1.标签不闭合：如`<div>`标签没有关闭。
2.标签顺序错误：如`<head>`标签出现在`<body>`标签之后。
3.属性值错误：如`<img src="nonexistent.jpg"`，图片路径错误。
4.字符编码问题：如中文字符显示乱码。
【解决方法】针对上述问题，可以采取以下解决方法：1.使用HTML验证工具：如W3C验证器，检查HTML代码是否符合标准。
2.检查标签闭合：确保每个开始标签都有一个对应的结束标签。
3.检查标签顺序：按照正确的顺序插入HTML标签。
4.检查属性值是否正确：确保属性值指向正确的资源文件或符合规范的值。
IE6下positionabsolute定位错误的bug和解决方法
IE6下position:absolute定位错误的bug和解决方法今天在项目中碰到了一个位置bug：-----------------------------<style>.test_1{ position:relative; margin:0 auto; text-align:center; width:500px; height:300px;background:#006600; }.c_1{ position:absolute; width:100px; height:20px; background:#0066CC; }</style><div class="test_1"><div class="c_1"></div></div>如图：修正：<style>.test_1{ position:relative; margin:0 auto; text-align:center; width:500px; height:300px; background:#006600; zoom:1;}.c_1{ position:absolute; width:100px; height:20px; background:#0066CC; top:0; left:0;}</style></head><body><div class="test_1"><div class="c_1"></div></div></body></html>如图：其它浏览器表现正常，第二个DIV在父元素的左边对齐，其在IE6中会以第一个子DIV 元素为参考点，表现与其它的浏览器不一致。
CSS兼容性问题总结及解决方法
CSS兼容性问题总结及解决⽅法css兼容问题兼容问题1.⽂字本⾝的⼤⼩不兼容。
同样是font-size:14px的宋体⽂字，在不同浏览器下占的空间是不⼀样的，ie下实际占⾼16px，下留⽩3px，ff下实际占⾼17px，上留⽩1px，下留⽩3px。
解决⽅案：给⽂字设定 line-height 。
确保所有⽂字都有默认的 line-height 值。
2.ff下容器⾼度限定.即容器定义了height之后，容器边框的外形就确定了，不会被内容撑⼤，⽽ie下是会被内容撑⼤，⾼度限定失效。
所以不要轻易给容器定义height。
3. 横向上的内容撑破容器问题。
如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折⾏。
故，内容可能撑破的浮动容器需要定义width。
4.浮动的清除，ff下必须清除浮动clear:both。
5. double-margin bug。
ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。
解决⽅案，给浮动容器定义display:inline。
6.margin bug.当外层元素内有float元素时，外层元素如定义margin-top:14px，将⾃动⽣成margin-bottom:14px。
padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这⼀种出现条件。
解决⽅案：外层元素设定border 或设定float。
7.吞吃现象.还是ie6，上下两个div，上⾯的div设置背景，却发现下⾯没有设置背景的div 也有了背景，这就是吞吃现象。
对应上⾯的背景吞吃现象，还有滚动下边框缺失的现象。
解决⽅案：使⽤zoom:1。
8.注释也能产⽣bug~~~“多出来的⼀只猪。
”这是前⼈总结这个bug使⽤的⽂案，ie6的这个bug 下，⼤家会在页⾯看到猪字出现两遍，重复的内容量因注释的多少⽽变。
解决⽅案：⽤“<!–[if !IE]> picRotate start <![endif]–>”⽅法写注释。
IE6常见CSS解析Bug及hack-好程序员
IE6常见CSS解析Bug及hack-好程序员1.默认高度（IE6）描述：在IE6及以下版本中，部分块元素拥有默认高度（在16px左右；）hack1:给元素添加声明：font-size:0;hack2：给元素添加声明：overflow:hidden;2.图片有边框BUG ,当图片加在IE上会出现边框Hack:给图片加border:0;或者border:none;3.图片间隙,div中的图片间隙BUG描述：在div中插入图片时，图片会将div下方撑大大约三像素。
hack1:将与写在一行上；ie6hack2:将转为块状元素，给添加声明：display:block;hack3:给图片添加vertical-align:top/middle/bottom.4. 双倍浮向（双倍边距）（只有IE6出现）描述：当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界（margin）加倍显示。
hack:给浮动元素添加声明：display:inline;5.表单元素行高对齐不一致描述：表单元素行高对齐方式不一致hack:给表单元素添加声明：float:left;6.按钮元素默认大小不一描述：各浏览器中按钮元素大小不一致hack1：统一大小/（用a标记模拟）hack2:input外边套一个标签，在这个标签里写按钮的样式，把input的边框去掉。
hack3:如果这个按钮是一个图片，直接把图片作为按钮的背景图即可7.百分比bug描述：在IE7及以下版本中在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的情况。
(也会受系统影响）hack: 给右面的浮动元素添加声明：clear:right; 意思：清除右浮动。
8.鼠标指针bug描述：cursor属性的hand属性值只有IE9以下浏览器识别，其它浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。
IE6-IE11兼容性问题列表及解决办法
IE6-IE11兼容性问题列表及解决办法2015/3/2 Bob Liu名目概述3第一章：HTML 4第一节：IE7-IE8更新41. 如果缺少终止标记的P 元素后跟TABLE、FORM、NOFRAMES 或NOSCRIPT 元素，会自动添加终止标记。
42. 支持格式正确的有效标记，不再支持格式错误的HTML。
63. Button标签的默认type类型从button改为submit。
74. 不再支持COL 及COLGROUP 元素的部分属性及为其设定的CS S 特性. 8第二节: IE8-IE9更新91. 表对象模式现在更加符合其他扫瞄器。
92. 文本布局使用自然度量而不是图形设备接口(GDI) 度量。
12第二章：CSS 15第一节：IE6-IE7更新151. 方框模型溢出内容现与方框相交，不再让方框自动增长适应内容。
152. 不再支持某些CSS 选择器（如*HTML、_underscore 和/**/ 注释）。
173. 已解决SELECT 元素不能被div覆盖的咨询题。
214. CSS样式区分大小写。
225.Style中的height, width结尾需要输入单位，如px 23第二节：IE7-IE8更新231. 不再支持CSS 表达式，改为支持增强的CSS 或DHTML 逻辑。
23第三节：IE8-IE9更新251. 泰语和东亚语文本和字体大小的显示可能小于其他字样。
252. 某些行为连接方法在XML 模式中不可用。
26第四节：IE9-IE10更新281. 不再支持CSS behavior，完全废弃htc表达式。
28第三章：Javascript and DOM 29第一节：IE6-IE7更新291. 不再承诺用于绕过window.close 提示的window.opener 技巧。
2 92. 从脚本创建的模式或无模式对话框看起来看起来略微变大。
30第二节：IE7-IE8更新311. 支持“class”语法，不再支持“className”属性语法。
IE6双边距bug及其解决办法
IE6双边距bug及其解决办法<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"/><title>⽆标题⽂档</title><style type="text/css">body,div{margin:0;padding:0;}#div1{width:200px;height:200px;background:#900;margin:20px 0 0 20px;float:left;}#div2{width:300px;height:200px;background:#009;margin:20px 0 0 20px;float:left;}</style></head><body><div id="div1"></div><div id="div2"></div></body></html>上⾯这段代码，在IE6和FF中的显⽰结果分别如下图所⽰:可以看到，在IE6中显⽰的红⾊区域的左边距实际为40px，是CSS代码中设置的20px的两倍，这是IE6的双边距BUG。
当满⾜下⾯这三个条件时，就会出现这个BUG：1、要为块状元素；2、要左侧浮动；3、要有左外边距（margin-left）。
出现双边距的条件是当浮动元素的浮动⽅向和margin的⽅向⼀致时才会出现。
也就是说，并不是只有块状元素左浮动，且具有左外边距时才有这个 BUG，当⼀个盒⼦右浮动的同时有⼀个向右的margin-right的时候，IE6也会把margin-right解析为原来的2倍。
史上最全前端面试题(含答案)
HTML+CSS1.对WEB标准以及W3C的理解与认识标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；2.xhtml和html有什么区别HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同：XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 用于声明文档使用那种规范（html/Xhtml）一般为严格过度基于框架的html 文档加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug4.行内元素有哪些？块级元素有哪些？CSS的盒模型？块级元素：div p h1 h2 h3 h4 form ul行内元素: a b br i span input selectCss盒模型:内容，border ,margin，padding5.CSS引入的方式有哪些? link和@import的区别是?内联内嵌外链导入区别：同时加载前者无兼容性，后者CSS2.1以下浏览器不支持Link 支持使用javascript改变样式，后者不可6.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？标签选择符类选择符 id选择符继承不如指定 Id>class>标签选择后者优先级高7.前端页面有哪三层构成，分别是什么？作用是什么？结构层 Html 表示层 CSS 行为层 js8.css的基本语句构成是？选择器{属性1:值1;属性2:值2;……}9.你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?Ie(Ie内核) 火狐（Gecko）谷歌（webkit） opear(Presto)10.写出几种IE6 BUG的解决方法1.双边距BUG float引起的使用display2.3像素问题使用float引起的使用dislpay:inline -3px3.超链接hover 点击后失效使用正确的书写顺序 link visited hover active4.Ie z-index问题给父级添加position:relative5.Png 透明使用js代码改6.Min-height 最小高度！Important 解决’7.select 在ie6下遮盖使用iframe嵌套8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）11.<img>标签上title与alt属性的区别是什么？Alt 当图片不显示是用文字代表。
前端开发技术中的常见错误和解决方法
前端开发技术中的常见错误和解决方法在前端开发过程中，经常会遇到各种各样的问题和错误。
这些问题可能是由于编码错误、逻辑错误或其他原因导致的。
本文将介绍一些前端开发中常见的错误，并提供相应的解决方法。
一、浏览器兼容性问题浏览器兼容性问题是前端开发中常见的问题之一。
由于不同浏览器对HTML、CSS和JavaScript的解析和渲染方式不同，可能会导致网页在不同浏览器上显示效果不一致或出现错误。
针对这个问题，我们可以采取以下解决方法：1. 使用CSS Reset重置样式：CSS Reset是一种将浏览器默认样式重置为统一样式的方法。
通过使用CSS Reset，我们可以确保网页在不同浏览器上的显示效果更加一致。
2. 使用CSS前缀：有些CSS属性在不同浏览器上需要加上相应的前缀才能正常工作，比如-webkit-、-moz-等。
我们可以通过CSS预处理器或自动添加前缀的工具来解决这个问题。
二、性能优化问题性能优化是前端开发中需要关注的一个重要方面。
一个网页的加载速度和响应速度对用户体验和搜索引擎优化都有着重要的影响。
常见的性能优化问题包括图片过大、JavaScript文件过大、渲染阻塞等。
以下是一些解决性能优化问题的方法：1. 压缩和合并文件：通过压缩CSS和JavaScript文件的大小以及合并多个文件，可以减少网络请求次数，提升网页加载速度。
2. 图片优化：通过使用适当的图片格式、进行图片压缩以及懒加载等方法，可以减少图片对网页性能的影响。
3. 异步加载脚本：将一些不需要立即执行的JavaScript代码进行异步加载，减少对渲染的阻塞，提升网页响应速度。
三、安全性问题在前端开发中，安全性问题也是需要重视的。
常见的安全性问题包括跨站脚本攻击（XSS）、跨站请求伪造（CSRF）等。
以下是一些解决安全性问题的方法：1. 输入验证和过滤：对用户输入的数据进行验证和过滤，防止恶意脚本注入或其他安全漏洞。
2. 使用HTTPS协议：通过使用HTTPS协议，可以对网页传输的数据进行加密，提高数据的安全性。
网页错位原因解决方法
网页错位原因解决方法
不时我们会碰到咱们要配置在一行呈现的组织，却由于种种缘故原由组成为了错位，看到究竟是在一行的着末一个盒子布局错位掉上去了（下
列图）。
错位一 3错位凋零与1和2下方错位二网页组织错位树范
形成DIV CSS网页结构错位的原由大概有两种环境，一种是宽度计算差迟，一种是IE BUG造成，额外是IE6与IE7。
今后我们挨着为各
人简介错位与方案错位法子。
一、宽度计算纰谬决定方法
宽度计算差错，假设总宽度为500px，有3个盒子，划分css宽度为200px、200px、100px，这个没标题可能在一排闪现不会错位，但
若退出了css边框、padding、margin属性时，别忘记这几个属性所
第1页共3页。
Web前端开发试卷及答案
Web前端开发系班级姓名成绩一、填空题（每空4分，共40分）1、目前常用的WEB标准静态页面语言是__ ______。
2、改变元素的外边距用________，改变元素的内填充用________。
3、在Table中，TR是________，TD是________。
4、如果给一行两列的表格（table）定义高度样式，在________标签中定义最合理，最能减少代码的臃肿。
5、对ul li的样式设成无，应该是用什么属性________。
6、在新窗口打开链接的方法是________。
7、合理的页面布局中常听过结构与表现分离，那么结构是________，表现是________。
二、选择题（每小题5分，共20分）1、在下面的XHTML中，哪个可以正确地标记折行？A：<br /> B：<break/> C：<br>2、下列哪些是格式良好的XHTML？A：<p>A <b><i>short</b></i> paragraph</p>B：<p>A <b><i>short</i></b> paragraph</p>C：<p>A <b><i>short</i></b> paragraph3、在以下的HTML中，哪个是正确引用外部样式表的方法？A：<style src="mystyle.css">B：<link rel="stylesheet" type="text/css" href="mystyle.css">C：<stylesheet>mystyle.css</stylesheet>4、在HTML文档中，引用外部样式表的正确位置是？A：文档的末尾B：文档的顶部C：<body>部分D：<head>部分二、简答题（共40分）1、请写出超链接的顺序或者你在初始样式中的链接方法。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题，解决方法是改变CSS属性的排列顺序: L-V-H-A
a:link {color: #1f3a87; text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
还可以设置父容器的字体大小为零，font-size:0
ie6下空标签高度问题
一个空div如果高度设置为0到19px，IE6下高度默认始终19PX。
例如：
.c{background-color:#f00;height:0px;/*给定任何小于20px的高度 */}
<div class="c"></div>
a:hover {color: #bc2931; text-decoration:underline;}
a:active {color: #bc2931;}
IE6下这两个层中间怎么有间隙
这个IE的3PX BUG也是经常出现的，解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;
HTML+CSS结构中IE6BUG全集及解决方案
关键字： HTML+CSS IE6 IE6bug
CSS技巧：IE6双倍边距bug，3像素问题及解决办法，修正重复文字bug，IE6下为什么图片下方有空隙产生等等IE6BUG问题
IE6双倍边距bug
ห้องสมุดไป่ตู้
当页面内有多个连续浮动时，如本页的图标列表是采用左浮动，此时设置li的左侧margin值时，在最左侧呈现双倍情况。如外边距设置为10px，而左侧则呈现出20px，解决它的方法是在浮动元素上加上display:inline;的样式，这样就可避免双倍边距bug。
修正重复文字bug
复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法，有些是完美的，但是做一些反复试验也是必须的：
确保所有的元素使用”display:inline;”
在最后一个元素上使用一个”margin-right:-3px;”
IE6中奇数宽高的BUG
IE6还有奇数宽高的bug，解决方案就是将外部相对定位的div宽度改成偶数。
IE6下为什么图片下方有空隙产生
解决这个BUG的方法也有很多，可以是改变html的排版，或者定义img 为display:block
或者定义vertical-align属性值为vertical-align:top | bottom |middle |text-bottom
# 为浮动元素的最后一个条目使用一个条件注释，比如：
<!–[if !IE]>Put your commentary in here…<![endif]–>
在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。)
3像素问题及解决办法
当使用float浮动容器后，在IE6下会产生3px的空隙，有意思的是右侧容器没设置高度时3px在右侧容器内部，当设定高度后又跑到容器的左侧了，所以对布局精度要求高的话，请参考例29、31的解决方法。
当子元素浮动且未知高度时，怎么使父容器适应子元素的高度？
这种情况可在父窗口加上 overflow:auto;zoom:1;这两个样式属性，overflow:auto;是让父容器来自适应内部容器的高度，zoom:1;是为了兼容IE6而使用的CSS HACK。zoom:1;通不过W3C的验证，这也是遗憾的一点，幸好IE支持<!--[if IE]>这种写法，可以专门针对IE来写单独的样式，所以可以把这个属性写在页面内的<!--[if IE]>中，这样应该可以通过验证了。
IE6文字溢出BUG
说明：注释造成文字溢出是IE的BUG。
一个空格引发CSS失效
这段代码对<p>的首字符样式定义在IE6上看是没有效果的（IE7没测试），而在p:first-letter和{font-size:300%}加上空格，也就是p:first-letter {font-size:300%}后，显示就正常了。但是同样的代码，在FireFox下看是正常的。按道理说，p:first-letter{font-size:300%}的写法是没错的。那么问题出在哪里呢？答案是伪类中的连字符"-"。IE有个BUG，在处理伪类时，如果伪类的名称中带有连字符"-"，伪类名称后面就得跟一个空格，不然样式的定义就无效。而在FF中，加不加空格都可以正常处理。
如果不让它默认为19PX。而是0PX的话
解决方法有3种：
1.css里面加上overflow:hidden;
2.div里面加上注释,
<div class="c"><!– –></div>
3.css里面加上line-height:0;然后div里面加上#nbsp;,
<div class="c"> </div>(#换成&)