博客
资料
短消息
搜索
加为好友
成为Fans
江苏
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" c />
<style type="text/css">
<!--
div {
cursor:pointer;
width:200px;
height:200px;
border:10px solid red
}
-->
</style>
<div >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
 UID:547 |
|
|
Time: 07-10-26 13:32
|
|
UID:547 |
|
|
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" c /> <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> 解决办法是将body换成html Time: 07-10-26 13:33
|
暂时空缺
|
|
UID:547 |
|
|
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" c /> <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的优先权 Time: 07-10-26 13:34
|
|
UID:547 |
|
|
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" c /> <style type="text/css"> <!-- div { background:red; } --> </style> <div> </div> IE6下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px Time: 07-10-26 13:35
|
暂时空缺
|
|
UID:547 |
|
|
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" c /> <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 Time: 07-10-26 13:36
|
暂时空缺
|
|
UID:547 |
|
|
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" c /> <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="test.swf"> <param name="movie" value="test.swf" /> </object> 解决的办法是给FLASH设置透明<param name="wmode" value="transparent" />或者<param name="wmode" value="opaque" /> Time: 07-10-26 13:38
|
|
UID:547 |
|
|
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" c /> <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> 这里我们使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二 Time: 07-10-26 13:39
|
|
UID:547 |
|
|
22 .图片垂直与容器内
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <style type="text/css"> <!-- * {margin:0;padding:0} div { width:500px; height:500px; border:1px solid #ccc; overflow:hidden; position:relative; display:table-cell; text-align:center; vertical-align:middle } div p { position:static; +position:absolute; top:50% } img { position:static; +position:relative; top:-50%;left:-50%; width:276px; height:110px } --> </style> <div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div> 标准浏览器下另类方法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <style type="text/css"> <!-- body { margin:0;padding:0 } div { width:500px; height:500px; line-height:500px; border:1px solid #ccc; overflow:hidden; position:relative; text-align:center; margin:auto } div p { position:static; +position:absolute; top:50% } img { position:static; +position:relative; top:-50%;left:-50%; width:276px; height:110px; vertical-align:middle } p:after { content:".";font-size:1px; visibility:hidden } --> </style> <div><p><img src="http://www.google.com/intl/en/images/logo.gif"/></p></div> 标准浏览器严格型申明下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <style type="text/css"> <!-- * {margin:0;padding:0} div { width:500px; height:500px; line-height:500px; border:1px solid #ccc; overflow:hidden; position:relative; text-align:center; } div p { position:static; +position:absolute; top:50%; vertical-align:middle } img { position:static; +position:relative; top:-50%;left:-50%; width:276px; height:110px; vertical-align:middle } --> </style> <div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div> Time: 07-10-26 13:43
|
暂时空缺
|
|
UID:547 |
|
|
还有 待会再发，发现一个不好的地方 找小力麻烦
Time: 07-10-26 13:43
|
 UID:4840 |
|
当前状态：离线
|
辛苦你了
|
陕西
