1. HTML对象获取问题 3
2. const问题 3
3. event.x与event.y问题 3
4. window.location.href问题 3
5. frame问题 3
6. 模态和非模态窗口问题 3
7. firefox与IE的父元素(parentElement)的区别 3
8. document.formName.item(”itemName”) 问题 3
9. 集合类对象问题 3
10. 自定义属性问题 3
11. input.type属性问题 3
12. event.srcElement问题 3
13. body载入问题 3
14. 事件委托方法 3
15. Table操作问题 3
16. 对象宽高赋值问题 3
Ø CSS 3
1. cursor:hand VS cursor:pointer 3
2. innerText在IE中能正常工作，但在FireFox中却不行. 3
3. CSS透明 3
4. css中的width和padding 3
5. FF和IE BOX模型解释不一致导致相差2px 3
6. IE5 和IE6的BOX解释不一致 3
7. ul和ol列表缩进问题 3
8. 元素水平居中问题 3
9. Div的垂直居中问题 3
10. margin加倍的问题 3
11. IE与宽度和高度的问题 3
12. 页面的最小宽度 3
13. DIV浮动IE文本产生3象素的bug 3
14. IE捉迷藏的问题 3
15. float的div闭合;清除浮动;自适应高度 3
16. 高度不适应 3
17. IE6下图片下有空隙产生 3
18. 对齐文本与文本输入框 3
19. LI中内容超过长度后以省略号显示 3
20. 为什么web标准中IE无法设置滚动条颜色了 3
21. 为什么无法定义1px左右高度的容器 3
22. 链接(a标签)的边框与背景 3
23. 超链接访问过后hover样式就不出现的问题 3
24. FORM标签 3
25. 属性选择器(这个不能算是兼容,是隐藏css的一个bug) 3
26. 为什么FF下文本无法撑开容器的高度 3
浏览器兼容性问题一直是Web开发中的重要议题，不同的浏览器在处理HTML、CSS以及JavaScript时存在差异，这给开发者带来了挑战。以下是一些常见的浏览器兼容性问题及其解决方案：
**JavaScript兼容性问题**
1. **HTML对象获取**：在Firefox中，推荐使用`document.getElementById()`来获取元素，而在IE中，`document.idname`也能工作。为了兼容，应统一使用`document.getElementById()`。
2. **const关键字**：Firefox支持`const`定义常量，而IE只支持`var`。为保证兼容，应使用`var`。
3. **event对象坐标**：IE提供`event.x`和`event.y`，Firefox则有`event.pageX`和`event.pageY`。可使用如下代码进行兼容处理：
```javascript
var mX = event.x ? event.x : event.pageX;
var mY = event.y ? event.y : event.pageY;
```
4. **window.location.href**：在Firefox 2.0.x及更高版本中，`window.location`和`window.location.href`等价，但Firefox 1.5.x只接受`window.location`。建议始终使用`window.location`。
5. **frame问题**：访问frame对象时，IE允许`window.frameId`或`window.frameName`，而Firefox仅接受`window.frameName`。使用`window.document.getElementById("frameId")`是通用方法。
6. **事件委托**：事件委托在所有现代浏览器中都已支持，但需要注意事件冒泡和捕获的差异。
7. **其他问题**：还包括`input.type`属性、`event.srcElement`、body载入事件、table操作、对象宽高设置等，需针对不同浏览器进行相应处理。
**CSS兼容性问题**
1. **cursor样式**：`cursor:hand`在IE中有效，Firefox则需用`cursor:pointer`。建议统一使用`cursor:pointer`。
2. **innerText**：在Firefox中，innerText不工作，可使用textContent代替。
3. **CSS透明**：使用`opacity`配合`filter`（针对IE）实现跨浏览器透明效果。
4. **width和padding**：Firefox和IE对盒模型解释不一致，需通过`box-sizing`属性进行调整。
5. **列表缩进**：通过设置`list-style-position`来解决ul和ol的缩进问题。
6. **元素水平居中**：可以使用`margin:0 auto`实现跨浏览器的水平居中。
7. **Div垂直居中**：有多种方法实现，如使用绝对定位、Flexbox或Grid布局。
8. **margin加倍**：针对IE的双边距问题，可以使用`display:inline-block`或负margin。
9. **最小宽度**：使用`min-width`结合`_width`（仅IE识别）实现兼容。
10. **浮动元素高度问题**：使用`clearfix`方法清除浮动，确保父元素包含浮动子元素。
11. **图片下空隙**：通过设置`display:block`消除图片下方的空白。
12. **文本与文本输入框对齐**：使用`vertical-align`属性进行调整。
13. **li内容省略号显示**：使用CSS的`text-overflow`和`white-space`属性。
14. **滚动条颜色**：CSS中直接设置滚动条颜色仅在某些浏览器生效，可以使用JavaScript库实现。
15. **1px高度容器**：在某些浏览器中，高度小于1px的容器可能无效，可通过设置line-height解决。
16. **链接边框与背景**：使用伪类`:active`和`:visited`确保样式正确。
17. **hover样式不出现**：确保`:hover`伪类应用在`a:link`和`a:visited`之后。
18. **FORM标签**：注意表单元素的默认样式可能在不同浏览器中有差异。
19. **属性选择器**：部分老版本浏览器不支持CSS3属性选择器，谨慎使用。
20. **文本撑开容器高度**：Firefox下，内联元素不自动撑开容器高度，可以使用`display:inline-block`或`display:block`解决。
以上只是部分兼容性问题的概述，实际开发中可能遇到更多细节问题，需要开发者根据项目需求和目标浏览器范围灵活应对。持续关注W3C标准和浏览器更新，使用前人总结的兼容性库（如jQuery）或工具（如Autoprefixer）也能有效减轻兼容性问题带来的困扰。
- 1
- 2
- 3
- 4
- 5
- 6
前往页