现在的位置: 首页 > 综合 > 正文

关于web 标准的常见问题 总结

2012年04月07日 ⁄ 综合 ⁄ 共 4953字 ⁄ 字号 评论关闭

目录如下:

1.超链接访问过后hover样式就不出现的问题
2.FF下如何使连续长字段自动换行
3.ff下为什么父容器的高度不能自适应
4. IE6的双倍边距BUG
5. IE6下绝对定位的容器内文本无法正常选择的问题
6. IE6下为什么图片下方有空隙产生
7. IE6下这两个层中间怎么有间隙
8. list-style-image无法准确定位的问题
9. LI中内容超过长度后以省略号显示的方法
10.web标准中定义id与class有什么区别吗
11.如何垂直居中文本
12.如何对齐文本与文本输入筐
13.为什么FF下面不能水平居中呢
14.为什么FF下文本无法撑开容器的高度
15.为什么IE6下容器的宽度和FF解释不同呢
16.为什么web标准中IE无法设置滚动条颜色了
17.为什么我定义的样式没有作用呢
18.为什么无法定义1px左右高度的容器
19.为什么这个背景颜色无法显示
20.怎么样才能让层显示在FLASH之上呢
21.怎样使一个层垂直居中于浏览器中
22.通用的加入收藏夹代码
23.javascript为FF设置首页
24.IE6使用滤镜使PNG图片透明后,容器内链接失效的问题

解决方案:

1.被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A

2.众所周知IE中直接使用        word-wrap:break-word 就可以了, 这里FF中我们使用JS插入
的方法来解决

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
 3 <head profile="http://www.w3.org/2000/08/w3c-synd/#">
 4 <meta http-equiv="content-language" content="zh-cn" />
 5 <meta http-equiv="content-type" content="text/html;charset=gb2312" />
 6 <title>blueidea</title>
 7 <style type="text/css">
 8 /*<![CDATA[*/
 9 div {
10     width:300px;
11     word-wrap:break-word;
12     border:1px solid red;
13     }
14 
15 /*]]>*/
16 </style>
17 </head>
18 <body>
19 
20 <div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
21 
22 
23 <script type="text/javascript">
24 // <![CDATA[
25 
26 function toBreakWord(intLen){
27 var obj=document.getElementById("ff");
28 var strContent=obj.innerHTML;  
29 var strTemp="";
30 while(strContent.length>intLen){
31 strTemp+=strContent.substr(0,intLen)+"&#10;";  
32 strContent=strContent.substr(intLen,strContent.length);  
33 }
34 strTemp+="&#10;"+strContent;
35 obj.innerHTML=strTemp;
36 }
37 if(document.getElementById  &&  !document.all)  toBreakWord(37)
38 // ]]>
39 </script>
40 </body>
41 </html>

3. style="clear:both  这个属性就不用说了吧 ,清除浮动而已。

4.解决办法是加上display:inline

5.

上面的问题在IE6、7中存在,解决问题的办法是让IE进入到quirks mode。关于quirks mode的相关知识,请参考:http://www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx?mfr=true

  • aoao:在IE6版本是6.0.2900.2180.xpsp_sp2.gdr.070227-2254好像依然存在问题,加了背景色依然无效。接着测试中。。。

6.

  • 解决这个BUG的方法也有很多,可以是改变html的排版,或者定义img 为display:block
  • 或者定义vertical-align属性值为vertical-align:top | bottom |middle |text-bottom
  • 还可以设置父容器的字体大小为零,font-size:0

7,。给同级div增加 float属性;

8. position:relative;

9 .text-overflow:ellipsis; 不折行的话 加个 white-space:nowarp; 这个属性好像是css3的;

10.这个问题可以忽略不计,大家都懂,我也没必要装B;

11.text-alight===height(只要等于你设置的高就可以了);

12. vertical-align:middle;

13 margin:auto; padding:auto;

14.

1 {
2  
3 height:auto!important;
4  
5 height:200px;
6  
7 min-height:200px;//ie6好像不支持这个 min-height
8  
9 }

15 参见http://www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx?mfr=true
16.

 1 //将body换成html 即可
 2 body {
 3     scrollbar-face-color:#f6f6f6;
 4     scrollbar-highlight-color:#fff;
 5     scrollbar-shadow-color:#eeeeee;
 6     scrollbar-3dlight-color:#eeeeee;
 7     scrollbar-arrow-color:#000;
 8     scrollbar-track-color:#fff;
 9     scrollbar-darkshadow-color:#fff;
10     }

17. ×查看优先权书写是否正确

18.IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px

19.地址http://bbs.blueidea.com/viewthread.php?tid=2636904,很长,我表示没看完;

20.解决的办法是给FLASH设置透明<param name="wmode" value="transparent" />或者<param name="wmode" value="opaque" />

21.使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二

22

 1 <script type="text/javascript">
 2 // <![CDATA[
 3 function bookmark(){
 4 var title=document.title
 5 var url=document.location.href
 6 if (window.sidebar) window.sidebar.addPanel(title, url,"");
 7 else if( window.opera && window.print ){
 8 var mbm = document.createElement('a');
 9 mbm.setAttribute('rel','sidebar');
10 mbm.setAttribute('href',url);
11 mbm.setAttribute('title',title);
12 mbm.click();}
13 else if( document.all ) window.external.AddFavorite( url, title);
14 }
15 // ]]>
16 </script>
17 
18 <a href="javascript:bookmark()">加入收藏夹</a>

23

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 2 <script type="text/javascript">
 3 // <![CDATA[
 4 function setHomePage(){
 5 if(window.netscape){
 6 try {  
 7 netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");  
 8 }  
 9 catch (e) {}}
10 var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch);
11 prefs.setCharPref('browser.startup.homepage','http://www.blueidea.com');
12 }
13 // ]]>
14 </script>
15 
16 <a href="#" onclick="setHomePage()">设置首页</a>

24

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
 3 <head profile="http://www.w3.org/2000/08/w3c-synd/#">
 4 <meta http-equiv="content-language" content="zh-cn" />
 5 <meta http-equiv="content-type" content="text/html;charset=gb2312" />
 6 <title>blueidea</title>
 7 <style type="text/css">
 8 /*<![CDATA[*/
 9 div {
10     width:401px;
11     height:223px;
12     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale', src='http://bbs.blueidea.com/attachments/2006/9/11/bg_nT9Vi2i45To0.png')
13     }
14 
15 /*]]>*/
16 </style>
17 </head>
18 <body>
19 
20 
21 <div><a href="#">27.IE6使用滤镜使PNG图片透明后,容器内链接失效的问题。</a></div>
22 
23 
24 </body>
25 </html>

 

抱歉!评论已关闭.