前端开发常见问题与解决策略

"本文档主要探讨了前端开发中的各种技术和最佳实践，特别关注了JavaScript、HTML和CSS在不同浏览器间的兼容性问题以及类名设置的解决方案。同时，也涵盖了前端开发的基础知识，如HTML语义化、SEO优化、CSS选择器和布局技巧等。" 在前端开发中，遇到的问题和解决方案包括： 1. 对象宽高赋值问题：在Firefox中，直接将图像对象的高度赋值给另一个对象的样式高度可能无效，应使用`obj.style.height = imgObj.height + 'px'`确保兼容性。 2. `setAttribute('style', 'color:red')`：Firefox和其他现代浏览器支持此方法设置样式，但IE不支持。在IE中，应使用`object.style.cssText = 'color:red;'`。为了跨浏览器兼容，最好同时使用两种方法。 3. 类名设置：在Firefox中，可以使用`setAttribute('class', 'styleClass')`，但在IE中，应避免直接指定属性名为"class"，因为IE不会设置元素的class属性。使用`setAttribute`时，IE会识别"CLASSNAME"属性。解决方法是根据浏览器类型选择合适的方法。 HTML和CSS的相关知识点： 1. 测试浏览器：开发时应确保在主流浏览器（如Chrome、Firefox、Safari、Edge和IE）进行测试，了解它们使用的内核，如WebKit、Gecko、Blink等。 2. DOCTYPE：声明文档类型，用于告诉浏览器以哪种模式解析HTML。 3. Quirks模式与Standards模式：Quirks模式遵循早期浏览器的非标准解析规则，而Standards模式遵循W3C标准。 4. div+css布局优于table布局，因为它提供更好的灵活性，利于响应式设计，且对搜索引擎友好。 5. alt与title属性：alt是图像替换文本，当图像无法显示时显示；title是鼠标悬停时显示的提示信息。strong用于强调文本，em表示文本的强调或重要性。 6. 渐进增强和优雅降级：渐进增强是从基本功能开始，逐步添加增强功能，确保所有浏览器都能正常工作；优雅降级是在现代浏览器中实现高级功能，同时确保在旧浏览器中仍能提供基本功能。 7. 多域名存储资源可以提高并发下载能力，减少浏览器对同一域名的并发请求限制。 8. 网页标准和标准制定机构（如W3C）的重要性在于确保跨平台、跨浏览器的一致性和可访问性。 9. cookies、sessionStorage和localStorage的区别：cookies数据存储量小，每次请求都会发送到服务器；sessionStorage仅在当前会话中存储数据；localStorage长期存储数据，但不随会话结束而清除。 10. src引用外部资源，href链接到其他文档或位置。 11. 常见的图片格式有JPEG、PNG、GIF、SVG等。 12. 微格式是一种让机器可读的结构化数据，前端构建时考虑微格式可以提升信息的可解析性。 13. JS请求缓存可能发生在HTTP缓存、浏览器缓存、Service Worker等。 14. 图片优化方法包括压缩图片、延迟加载、使用雪碧图或图标字体等。 15. HTML结构语义化有助于屏幕阅读器理解页面内容，提高可访问性。 16. SEO优化要考虑关键词、元标签、URL结构、页面速度等因素。 17. 设置DOM样式的方法有内联样式、内部样式表、外部样式表以及JavaScript操作。 18. CSS选择器包括标签选择器、类选择器、ID选择器、属性选择器、伪类等。 19. 隐藏DOM元素可使用`display:none`或`visibility:hidden`。 20. 超链接访问后，`:hover`样式不再出现，可能是因为CSS优先级问题，解决方法是调整选择器权重或使用`!important`。 21. CssHack是为了应对浏览器间CSS解析差异，如`_width:`针对IE6，`*width:`针对IE7，`width:`针对IE8。 22. 行内元素不能设置宽度和高度，但可以设置padding和margin，块级元素则可以。 23. 外边距重叠是指相邻块级元素垂直外边距合并，结果是取最大外边距。 24. rgba()提供透明度控制，opacity影响整个元素及其子元素的透明度。 25. `position: absolute`和`position: relative`结合使用可以实现元素的垂直居中。 26. px是绝对单位，固定大小，em是相对单位，基于父元素的字体大小。 27. "reset" CSS文件用于消除浏览器默认样式，normalize.css则保留了一些基本样式，使不同浏览器呈现一致的基础样式。 Sass和LESS是预处理器，它们允许使用变量、嵌套规则、混合等功能，简化CSS编写，提高代码可维护性。两者的主要区别在于语法和社区支持。