web标准常见问题（BUG）_网页易用性的bug举例资源-CSDN文库

共1个文件

htm：1个

需积分: 50 24 浏览量 2008-04-12 10:03:39 上传评论收藏 8KB RAR 举报

在Web开发领域，遵循标准是确保网站在不同浏览器和设备上具有良好兼容性和用户体验的关键。然而，实际操作中，开发者常常会遇到各种与web标准相关的技术问题，即我们所说的“BUG”。以下是一些常见的Web标准问题及其解决方案： 1. **CSS兼容性问题**：CSS在不同的浏览器中可能存在差异，导致样式显示不一致。例如，IE浏览器对某些CSS3属性的支持不如其他现代浏览器。解决方法是使用浏览器前缀（如 `-webkit-`, `-moz-`, `-ms-` 等）来确保兼容性，或者使用工具如Autoprefixer自动添加前缀。 2. **HTML5新元素的兼容性**：HTML5引入了许多新的语义元素，如`<header>`, `<footer>`, `<article>`等。在旧版的IE中，这些元素可能不受支持。解决方案是使用HTML5shiv或Modernizr库来为旧浏览器提供这些元素的样式支持。 3. **JavaScript跨浏览器兼容性**：JavaScript代码在不同的浏览器环境下可能会有不同的行为。例如，事件处理方式、DOM操作等。使用jQuery或其他JavaScript库可以帮助解决这些问题，它们提供了统一的API并处理了兼容性问题。 4. **响应式设计问题**：响应式设计允许网站根据用户设备的屏幕尺寸进行适配。然而，媒体查询（Media Queries）在某些浏览器中可能不被正确解析。确保正确设置`<meta name="viewport">`标签，并测试多种设备和浏览器的响应效果。 5. **语义化问题**：不恰当使用HTML标签可能导致语义不清，影响SEO和可访问性。比如，使用`<div>`替代`<table>`进行布局，或者用`<span>`嵌套大量内容。遵循正确的语义标签使用，如`<section>`, `<aside>`, `<nav>`等。 6. **图片加载问题**：大图或背景图片在加载时可能导致页面渲染延迟。可以使用CSS的`background-size`属性控制图片大小，或使用懒加载技术（Lazy Loading）延迟非视口内的图片加载。 7. ** Accessibility（无障碍性）问题**：对于视觉障碍的用户，依赖于屏幕阅读器的访问网站时，若网站未遵循无障碍标准，可能导致难以理解。确保所有元素都有合适的`alt`属性，表单元素有清晰的`label`，并避免使用只依赖颜色来传达信息的设计。 8. **字符编码问题**：不同浏览器默认的字符编码可能不同，导致乱码。在HTML文件的头部设置正确的`<meta charset="UTF-8">`标签，确保内容正确显示。 9. **DOCTYPE声明**：不正确的DOCTYPE声明可能导致浏览器进入怪异模式（Quirks Mode），影响页面布局。推荐使用HTML5的DOCTYPE声明：`<!DOCTYPE html>`。 10. **表单验证**：HTML5提供了内置的表单验证功能，但不是所有浏览器都支持。为了兼容性，需要同时使用JavaScript进行客户端验证，并在服务器端进行二次验证。通过持续关注Web标准的发展，定期更新技术和工具，以及充分测试不同环境下的表现，开发者可以有效地解决这些问题，创建出高质量且具有良好兼容性的Web应用。

资源推荐

资源详情

资源评论

收起资源包目录

web标准常见问题(bug,兼容).rar （1个子文件）

web标准常见问题集合.htm 63KB

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD><TITLE>web标准常见问题集合</TITLE> <META http-equiv=Content-Type content="text/html; charset=gbk"> </HEAD> <BODY > <DIV class=spaceborder style="BORDER-TOP: medium none; WIDTH: 98%"> <TABLE class=t_row cellSpacing=0 cellPadding=4 width="100%" align=center> <TBODY> <TR style="HEIGHT: 100%"> <TD class=t_user vAlign=top width="18%"><BR></TD> <TD style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px" vAlign=top width="82%"><TABLE class=t_msg cellSpacing=0 cellPadding=4 border=0> <TBODY> <TR> <TD><DIV>  <DIV style="PADDING-TOP: 4px"></DIV> </DIV></TD> </TR> <TR> <TD class=line style="LINE-HEIGHT: 20px; PADDING-TOP: 10px" vAlign=top height="100%"><DIV class=t_msgfont id=message2857249 style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px">列举了一些常见，新手经常问的问题。举例并说明解决方法。(内容在下面对应)<BR> 1.超链接访问过后hover样式就不出现的问题<BR> 2.FF下如何使连续长字段自动换行<BR> 3.ff下为什么父容器的高度不能自适应<BR> 4. IE6的双倍边距BUG<BR> 5. IE6下绝对定位的容器内文本无法正常选择的问题<BR> 6. IE6下为什么图片下方有空隙产生<BR> 7. IE6下这两个层中间怎么有间隙<BR> 8. list-style-image无法准确定位的问题<BR> 9. LI中内容超过长度后以省略号显示的方法<BR> 10.web标准中定义id与class有什么区别吗<BR> 11.如何垂直居中文本<BR> 12.如何对齐文本与文本输入筐<BR> 13.为什么FF下面不能水平居中呢<BR> 14.为什么FF下文本无法撑开容器的高度<BR> 15.为什么IE6下容器的宽度和FF解释不同呢<BR> 16.为什么web标准中IE无法设置滚动条颜色了<BR> 17.为什么我定义的样式没有作用呢<BR> 18.为什么无法定义1px左右高度的容器<BR> 19.为什么这个背景颜色无法显示<BR> 20.怎么样才能让层显示在FLASH之上呢<BR> 21.怎样使一个层垂直居中于浏览器中<BR> 22 .图片垂直与容器内<BR> 23.如何让三列横向排列<BR> 24.通用的加入收藏夹代码<BR> 25.复制到系统剪贴板之IE,ff兼容版<BR> 26.javascript为FF设置首页<BR> 27.IE6使用滤镜使PNG图片透明后，容器内链接失效的问题<BR> <BR> <FONT color=seagreen><B>1.超链接访问过后hover样式就不出现的问题</B></FONT><BR> <DIV class=smalltxt style="MARGIN-TOP: 1em; MARGIN-BOTTOM: 1em"> <TEXTAREA name=runcode0 rows=12 cols=95><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh"> <head profile="http://www.w3.org/2000/08/w3c-synd/#"> <meta http-equiv="content-language" content="zh-cn" /> <meta http-equiv="content-type" content="text/html;charset=gb2312" /> <title>blueidea</title> <style type="text/css"> /*<![CDATA[*/ a:link { color:red } a:hover { color:blue } a:visited { color:green } a:active { color:orange } /*]]>*/ </style> </head> <body> <a href="#"> web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全 </a> </body> </html></TEXTAREA> <BR>  提示：您可以先修改部分代码再运行<BR> <BR> </DIV> <DIV class=msgbody> <DIV class=msgheader> CODE:</DIV> <DIV class=msgborder id=code0>被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题，解决方法是改变CSS属性的排列顺序: L-V-H-A</DIV> </DIV> <p> </p> <p><BR> <B><FONT color=seagreen>2.FF下如何使连续长字段自动换行</FONT></B><BR> </p> <DIV class=smalltxt style="MARGIN-TOP: 1em"> <TEXTAREA name=runcode1 rows=12 cols=95><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh"> <head profile="http://www.w3.org/2000/08/w3c-synd/#"> <meta http-equiv="content-language" content="zh-cn" /> <meta http-equiv="content-type" content="text/html;charset=gb2312" /> <title>blueidea</title> <style type="text/css"> /*<![CDATA[*/ div { width:300px; word-wrap:break-word; border:1px solid red; } /*]]>*/ </style> </head> <body> <div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> <script type="text/javascript"> // <![CDATA[ function toBreakWord(intLen){ var obj=document.getElementById("ff"); var strContent=obj.innerHTML; var strTemp=""; while(strContent.length>intLen){ strTemp+=strContent.substr(0,intLen)+"&#10;"; strContent=strContent.substr(intLen,strContent.length); } strTemp+="&#10;"+strContent; obj.innerHTML=strTemp; } if(document.getElementById && !document.all) toBreakWord(37) // ]]> </script> </body> </html></TEXTAREA> <BR>  提示：您可以先修改部分代码再运行</DIV> <DIV class=msgbody> <DIV class=msgheader> CODE:</DIV> <DIV class=msgborder id=code1>众所周知IE中直接使用    word-wrap:break-word 就可以了, 这里FF中我们使用JS插入&#10;的方法来解决</DIV> </DIV> <p><BR> </p> <p><B><FONT color=seagreen>3.ff下为什么父容器的高度不能自适应</FONT></B><BR> </p> <DIV class=smalltxt style="MARGIN-TOP: 1em; MARGIN-BOTTOM: 1em"> <TEXTAREA name=runcode2 rows=12 cols=95><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh"> <head profile="http://www.w3.org/2000/08/w3c-synd/#"> <meta http-equiv="content-language" content="zh-cn" /> <meta http-equiv="content-type" content="text/html;charset=gb2312" /> <title>blueidea</title> <style type="text/css"> /*<![CDATA[*/ div { width:200px; border:1px solid red } p { float:left; width:100px; } /*]]>*/ </style> </head> <body> <div><p>web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题

评论收藏

内容反馈