<以下摘自:草堂学社,原文路径:
http://www.cm1314.cn/Article/site/ht/200704/16698.html>
列举了一些常见,新手经常问的问题。举例并说明解决方法。(内容在下面对应)
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.如何让三列横向排列
24.通用的加入收藏夹代码
25.复制到系统剪贴板之IE,ff兼容版
1.超链接访问过后hover样式就不出现的问题
列举了一些常见,新手经常问的问题。举例并说明解决方法。(内容在下面对应)
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.如何让三列横向排列
24.通用的加入收藏夹代码
25.复制到系统剪贴板之IE,ff兼容版
1.超链接访问过后hover样式就不出现的问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- a:link { color:red } a:hover { color:blue } a:visited { color:green } a:active { color:orange } --> </style> <a href="#"> web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常 见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全 web标准常见问题大全 </a>
提示:您可以先修改部分代码再运行
提示:您可以先修改部分代码再运行
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A
2.FF下如何使连续长字段自动换行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- div { width:300px; word-wrap:break-word; border:1px solid red; } --> </style> <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)+" "; strContent=strContent.substr(intLen,strContent.length); } strTemp+=" "+strContent; obj.innerHTML=strTemp; } if(document.getElementById && !document.all) toBreakWord(37) // ]]> </script>
提示:您可以先修改部分代码再运行
提示:您可以先修改部分代码再运行
众所周知IE中直接使用 word-wrap:break-word 就可以了, 这里FF中我们使用JS插入的方法来解决
3.ff下为什么父容器的高度不能自适应
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- div { width:200px; border:1px solid red } p { float:left; width:100px; } --> </style> <div><p>web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问 题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web 标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题 大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标 准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大 全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准 常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全</p></div>
提示:您可以先修改部分代码再运行
提示:您可以先修改部分代码再运行
为什么这个P撑不开DIV呢?解决的办法是在div 与 p 之间插入<div style="clear:both"></div>清除掉这个p的浮动
4. IE6的双倍边距BUG
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> body { margin:0 } div { float:left; margin-left:10px; width:200px; height:200px; border:1px solid red } </style> <div> <a href="#"> web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常 见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全 web标准常见问题大全 </a> </div>
提示:您可以先修改部分代码再运行
提示:您可以先修改部分代码再运行
浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline
5. IE6下绝对定位的容器内文本无法正常选择的问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> div { position:absolute; top:100px; left:100px; width:200px; height:200px; border:1px solid red } </style> <div> <a href="#"> web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常 见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全 web标准常见问题大全 </a> </div>
提示:您可以先修改部分代码再运行
提示:您可以先修改部分代码再运行
上面的问题在IE6、7中存在,解决问题的办法是让IE进入到quirks mode。关于quirks mode的相关知识,请参考:http: //www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx?mfr=true
6. IE6下为什么图片下方有空隙产生
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- div { border:1px solid red; background:orange; } img { width:276px; height:110px; } --> </style> <div> <img src="/Article/UploadFiles/200704/20070412160118811.gif" alt="google" /> </div>
提示:您可以先修改部分代码再运行
提示:您可以先修改部分代码再运行
解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block
或者设置vertical-align属性为vertical-align:top | bottom |middle |text-bottom
都可以解决.
或者设置vertical-align属性为vertical-align:top | bottom |middle |text-bottom
都可以解决.
7. IE6下这两个层中间怎么有间隙
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- .left { float:left; width:100px; height:100px; background:red } .right { width:100px; height:100px; background:orange } --> </style> <div class="left">aaaaaa</div> <div class="right">aaaaaa</div>
提示:您可以先修改部分代码再运行
提示:您可以先修改部分代码再运行
这个IE的3PX BUG也是经常出现的,解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;
8. list-style-image无法准确定位的问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- li { list-style:url("/Article/UploadFiles/200704/20070412160119523.gif"); } li a { position:relative; top:-5px; font:12px/25px 宋体; } --> </style> <ul> <li><a href="#">web标准常见问题大全</a></li> <li><a href="#">web标准常见问题大全</a></li> <li><a href="#">web标准常见问题大全</a></li> <li><a href="#">web标准常见问题大全</a></li> <li><a href="#">web标准常见问题大全</a></li> </ul>
提示:您可以先修改部分代码再运行
提示:您可以先修改部分代码再运行
这个list-style-image的定位问题也是经常有人问的,解决的办法一般是用li的背景模拟,这里采用相对定位的方法也可以解决
9. LI中内容超过长度后以省略号显示的方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- li { width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; } --> </style> <ul> <li><a href="#">web标准常见问题大全web标准常见问题大全</a></li> <li><a href="#">web标准常见问题大全web标准常见问题大全</a></li> <li><a href="#">web标准常见问题大全web标准常见问题大全</a></li> <li><a href="#">web标准常见问题大全web标准常见问题大全</a></li> <li><a href="#">web标准常见问题大全web标准常见问题大全</a></li> </ul>
提示:您可以先修改部分代码再运行
提示:您可以先修改部分代码再运行
此方法适用与IE与OP浏览器
10.web标准中定义id与class有什么区别吗
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- #aa { color:red } .aa { color:blue } --> </style> <div id="aa" class="aa"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div>
提示:您可以先修改部分代码再运行
提示:您可以先修改部分代码再运行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- .a { color:orange } .b { background:#eee } .c { border:1px solid red } --> </style> <div class="a b c">aaaaaaaa</div>
提示:您可以先修改部分代码再运行
提示:您可以先修改部分代码再运行
一.
web标准中是不容许重复ID的,比如 div id="aa" 一个页面中不容许重复2次,而class 定义的是类,理论上可以无限重复的, 这样需要多次引用的定义便可以使用他.class还可以同时引用多个类,不同的类之间用空格隔开.
二.
属性的优先级问题,ID 的优先级要高于class,看上面的例子
三.
方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.
web标准中是不容许重复ID的,比如 div id="aa" 一个页面中不容许重复2次,而class 定义的是类,理论上可以无限重复的, 这样需要多次引用的定义便可以使用他.class还可以同时引用多个类,不同的类之间用空格隔开.
二.
属性的优先级问题,ID 的优先级要高于class,看上面的例子
三.
方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.
11.如何垂直居中文本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- div { height:30px; line-height:30px; border:1px solid red } --> </style> <div>web标准常见问题大全</div>
提示:您可以先修改部分代码再运行
提示:您可以先修改部分代码再运行
给容器设置一个与其高度相同的行高就可以了
12.如何对齐文本与文本输入筐
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- input { width:200px; height:30px; border:1px solid red; } --> </style> <input type="text" />aaaaaaaaaaaaaaaaaa
提示:您可以先修改部分代码再运行
提示:您可以先修改部分代码再运行
遇到此种问题,设置文本框的 vertical-align:middle 就可以了
13.为什么FF下面不能水平居中呢
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- body { text-align:center; } div { margin:0 auto; width:500px; height:200px; border:1px solid red } --> </style> <div></div>
提示:您可以先修改部分代码再运行
提示:您可以先修改部分代码再运行
FF下面设置容器的左右外补丁为auto就可以了
14.为什么FF下文本无法撑开容器的高度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- div { width:200px; height:200px; border:1px solid red } --> </style> <div>web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常 见问题大全web标准常见问题大全web标准常见web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准 常见问题大全web标准常见问题大全web标准常见问题大全web标准常见web标准常见问题大全web标准常见问题大全web标准常见问题大全web标 准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见web标准常见问题大全web标准常见问题大全web 标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见web标准常见问题大全 web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常 见web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准 常见问题大全web标准常见</div>
提示:您可以先修改部分代码再运行
提示:您可以先修改部分代码再运行
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:
{
height:auto!important;
height:200px;
min-height:200px;
}
{
height:auto!important;
height:200px;
min-height:200px;
}
15.为什么IE6下容器的宽度和FF解释不同呢
<?xml version="1.0" encoding="gb2312"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- div { cursor:pointer; width:200px; height:200px; border:10px solid red } --> </style> <div οnclick="alert(this.offsetWidth)">web标准常见问题大全</div> <hr/>
提示:您可以先修改部分代码再运行
提示:您可以先修改部分代码再运行
问题的差别在于容器的整体宽度有没有将边框(border)的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢?大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的quirks mode,关于quirks mode、standards mode的相关知识,请参考:http: //www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx?mfr=true
16.为什么web标准中IE无法设置滚动条颜色了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- body { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; } --> </style> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
提示:您可以先修改部分代码再运行
提示:您可以先修改部分代码再运行
解决办法是将body换成html
17.为什么我定义的样式没有作用呢
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- #aa ul li { color:red } .aa { color:blue } --> </style> <div id="aa"> <ul> <li class="aa"> web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常 见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全 web标准常见问题大全 </li> </ul> </div>
提示:您可以先修改部分代码再运行
提示:您可以先修改部分代码再运行
这里你无法用.aa定义到li 遇到这种情况怎么解决呢?答案是提高.aa 的优先权 比如#aa ul li.aa 优先权相关文章参考-baidu搜索关键词: CSS的优先权
18.为什么无法定义1px左右高度的容器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- div { background:red; } --> </style> <div> </div>
提示:您可以先修改部分代码再运行
提示:您可以先修改部分代码再运行
IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px
19.为什么这个背景颜色无法显示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- ul { background:red } li { float:left; width:180px; } --> </style> <ul> <li>web标准常见问题大全</li> <li>web标准常见问题大全</li> <li>web标准常见问题大全</li> <li>web标准常见问题大全</li> <li>web标准常见问题大全</li> <div style="clear:both"></div> </ul>
提示:您可以先修改部分代码再运行
提示:您可以先修改部分代码再运行
IE中设置有背景色的ul并没有显示出来,这个属于haslayout问题,解决的办法也很多参考:http://bbs.blueidea.com/viewthread.php?tid=2636904
20.怎么样才能让层显示在FLASH之上呢
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- div { position:absolute; top:20px; left:20px; width:200px; height:200px; background:red } object { width:500px; height:100px; } --> </style> <div> web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常 见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全 web标准常见问题大全 </div> <object type="application/x-shockwave-flash" data="http://gg.blueidea.com/2005/www/m533-104.swf"> <param name="movie" value="http://gg.blueidea.com/2005/www/m533-104.swf" /> </object>
提示:您可以先修改部分代码再运行
提示:您可以先修改部分代码再运行
解决的办法是给FLASH设置透明<param name="wmode" value="transparent" />或者<param name="wmode" value="opaque" />
21.怎样使一个层垂直居中于浏览器中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- div { position:absolute; top:50%; left:50%; margin:-100px 0 0 -100px; width:200px; height:200px; border:1px solid red; } --> </style> <div>web标准常见问题大全</div>
提示:您可以先修改部分代码再运行
提示:您可以先修改部分代码再运行
这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二
22 .图片垂直与容器内
参考:http://bbs.blueidea.com/thread-2666987-1-1.html
23.如何让三列横向排列
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <style> div { float:left; margin:1px; width:200px; height:200px; background:orange } </style> <div></div> <div></div> <div></div>
提示:您可以先修改部分代码再运行
提示:您可以先修改部分代码再运行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <style> div { position:absolute; top:50%; left:50%; margin:-100px 0 0 -300px; } </style> <div style="background:#404040;width:200px;height:200px;">1</div> <div style="background:#FD7C03;width:200px;height:200px;margin:-100px 0 0 -100px;">2</div> <div style="background:#eee;width:200px;height:200px;margin:-100px 0 0 100px;">3</div>
提示:您可以先修改部分代码再运行
提示:您可以先修改部分代码再运行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <style> span { margin:1px; display:-moz-inline-box; display:inline-block; width:300px; height:200px; background:orange; } </style> <span></span> <span></span> <span></span>
提示:您可以先修改部分代码再运行
提示:您可以先修改部分代码再运行
横向排列DIV可以使用浮动的方式比如float:left,或者用内联方式,还可以绝对定位对象等等.
24.通用的加入收藏夹代码
<script type="text/javascript"> // <![CDATA[ function bookmark(){ var title=document.title var url=document.location.href if (window.sidebar) window.sidebar.addPanel(title, url,""); else if( window.opera && window.print ){ var mbm = document.createElement('a'); mbm.setAttribute('rel','sidebar'); mbm.setAttribute('href',url); mbm.setAttribute('title',title); mbm.click();} else if( document.all ) window.external.AddFavorite( url, title); } // ]]> </script> <a href="javascript:bookmark()">加入收藏夹</a>
提示:您可以先修改部分代码再运行
提示:您可以先修改部分代码再运行
经常有朋友说他的加入收藏夹代码只支持IE,上面的例子可以很好的解决这个问题,在IE6-7. FF2.0 OP9.0中测试通过
25.复制到系统剪贴板之IE,ff兼容版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <script type="text/javascript"> // <![CDATA[ function copy_clip(copy){ if (window.clipboardData){ window.clipboardData.setData("Text", copy);} else if (window.netscape){ netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard); if (!clip) return; var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable); if (!trans) return; trans.addDataFlavor('text/uni提示'); var str = new Object(); var len = new Object(); var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString); var copytext=copy; str.data=copytext; trans.setTransferData("text/uni提示",str,copytext.length*2); var clipid=Components.interfaces.nsIClipboard; if (!clip) return false; clip.setData(trans,null,clipid.kGlobalClipboard);} alert("已复制"+copy) return false; } // ]]> </script> <h1>请另存代码测试</h1> <input type="text" id="ff" value="www.blueidea.com" /><button οnclick="copy_clip(document.getElementById('ff').value)">复制 </button>
提示:您可以先修改部分代码再运行
提示:您可以先修改部分代码再运行
<以下摘自: http://blog.csdn.net/baikangwang/archive/2007/06/20/1659142.aspx>
其中以下信息参考了 xiwen的部分资料:
W3C说是一个 标准,不如说是一个麻烦, FireFox大家都说好用,但我宁愿它没有!! 苦了那些程序员。
以下细节只针对IE和FireFox,其它浏览器并未测试
对div设置水平居中对齐时,要给子div加上一句"margin:auto"以兼容
FireFox浏览器
当div的布局并没有如text-align设置的那样排列时,尝试用float来实现
将<p>标签的样式改成:margin:0px;line-height:XXpx,避免在 FireFox浏览器下发生一些意想不到的结果
想要消除ul、ol等列表的缩进时,样式应写成:list-style:none;margin:0px;padding:0px;,其中margin属性对IE有效,padding属性对 FireFox有效
padding 5px 4px 3px 1px FireFox无法解释简写,必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;
当div的布局并没有如text-align设置的那样排列时,尝试用float来实现
将<p>标签的样式改成:margin:0px;line-height:XXpx,避免在 FireFox浏览器下发生一些意想不到的结果
想要消除ul、ol等列表的缩进时,样式应写成:list-style:none;margin:0px;padding:0px;,其中margin属性对IE有效,padding属性对 FireFox有效
padding 5px 4px 3px 1px FireFox无法解释简写,必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;