Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>各种bug浅谈</title>
<style>
@charset "utf-8";
/* CSS Document */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0; padding:0;vertical-align:middle;}
table{border-collapse:collapse; border-spacing:0;}
ul{list-style:none;}
fieldset,img {border:0;}
a{text-decoration:none; outline:none;}
a:hover{text-decoration:none;}
em{font-style:normal;}
/*typography*/
body, button, input, select, textarea {font:12px/1.5 Regular, Helvetica, Arial, "微软雅黑", sans-serif;}
​
h1 {font-size:18px;}
h2 {font-size:16px;}
h3 {font-size:14px;}
h4, h5, h6 { font-size:100%; }
code, kbd, pre, samp, tt{font-family:"Courier New", Courier, monospace;}
dl{ overflow:hidden;zoom:1; padding-bottom:16px; border-bottom:2px dotted #C0C; margin-bottom:10px;}
dt{ font-size:14px; font-weight:bold; line-height:26px;}
.main{ width:550px; margin: 0 auto; overflow:hidden;zoom:1; padding:10px;}
.mod-demo{border:1px solid #000; background-color:#CCC; overflow:hidden;zoom:1; padding:10px;}
.mod-demo .tt{ text-indent:2em; padding:10px 0; overflow:hidden;zoom:1; clear:both;}
.codeCon{ background-color:#FFC; padding:10px;}
.ie6fixedTL{position:fixed;left:0;top:0; border:1px solid #000; width:80px;}
.ie6fixedBR{position:fixed;right:0;bottom:0;border:1px solid #000; width:80px;}
/* IE6浏览器的特有方法 */
* html,* html body{background-image:url(about:blank);background-attachment:fixed}
* html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}
* html .ie6fixedBR{position:absolute;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}
</style>
</head>
​
<body>
<div class="main">
    <dl>
        <dt>1、IE6.0 Bug---双倍边距(margin)的bug</dt>
        <dd>
            <div class="codeCon">
                <p>解决方法：</p>
                <p>加一句：display:inline;就ok.</p>
            </div>
            <div class="demoCon">
                
                <div class="mod mod-demo">
                    <p class="tt">双倍边距解决前</p>
                    <div style="width:100px; height:100px; background-color:#fff; border:1px solid #ddd; float:left; margin-left:20px;">
                        margin-left:20px;
                    </div>
                    <div style="width:100px; height:100px; background-color:#fff; border:1px solid #ddd; float:right; margin-right:20px;">
                        margin-right:20px;
                    </div>
                    <p class="tt">双倍边距解决后</p>
                    <div style="width:100px; height:100px; background-color:#fff; border:1px solid #ddd; float:left; margin-left:20px; display:inline;">
                        margin-left:20px;
                    </div>
                    <div style="width:100px; height:100px; background-color:#fff; border:1px solid #ddd; float:right; margin-right:20px; display:inline;">
                        margin-right:20px;
                    </div>
                </div>
            </div>
        </dd>
    </dl>
     <dl>
        <dt>2、ie6在以下情况下将会引起文字溢出bug</dt>
        <dd>
            <div class="codeCon">
                <p>出现的前提：</p>
                <p>一个容器包含2两个具有“float”样式的子容器。</p>
                <p>第二个容器的宽度大于父容器的宽度，或者父容器宽度减去第二个容器宽度的值小于3</p>
                <p>在第二个容器前存在注释（这也是为什么此bug也叫做“IE6注释bug”的原因）。</p>
                <p>解决方法：</p>
                <p>1.去掉所有的注释。(这个不太好)</p>
                <p>2.讲--改成————</p>
            </div>
            <div class="demoCon">
                
                <div class="mod mod-demo">
                    <p class="tt">解决前</p>
                    <div style="width:200px;border:1px solid #0066cc;background-color:#cccccc;height:100px;padding:10px;">
                        <div style="float:left;"></div>
                        <!-- 如果是IE6，你将多看到一个“怪”字 --><div style="float:left;width:200px;">这个文字溢出bug很奇怪</div>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;怪
                    </div>
                    <p class="tt">解决后</p>
                    <div style="width:200px;border:1px solid #0066cc;background-color:#cccccc;height:100px;padding:10px;">
                        <!———— 如果是IE6，你将多看到一个“怪”字 ————><div style="float:left;width:200px;">这个文字溢出bug很奇怪</div>
                    </div>    
                </div>
            </div>
        </dd>
    </dl>
     <dl>
        <dt>3、ie下图片空隙BUG</dt>
        <dd>
            <div class="codeCon">
                <p>出现的前提：</p>
                <p>有2个img或者同时用的时候，就会出现。</p>
                <p>解决方法：</p>
                <p>1.img加vertical-align:top;</p>
                <p>2.设置图片的浮动属性，例如img加float:left;</p>
            </div>
            <div class="demoCon">
                
                <div class="mod mod-demo">
                    <p class="tt">解决前</p>
                    <div style="border:1px solid #0066cc;background-color:#cccccc;padding:10px;">
                        <img src="http://img.dwstatic.com/tv/1311/248115076493/1384164299404.jpg" width="318" height="178">
                        <img src="http://img.dwstatic.com/news/1311/248093459257/1384138272611.jpg" width="318" height="178">
                    </div>
                    <p class="tt">解决后</p>
                    <p class="tt">1.加vertical-align:top;</p>
                    <div style="border:1px solid #0066cc;background-color:#cccccc;padding:10px;">
                        <img src="http://img.dwstatic.com/tv/1311/248115076493/1384164299404.jpg" width="318" height="178" style="vertical-align:top;">
                        <img src="http://img.dwstatic.com/news/1311/248093459257/1384138272611.jpg" width="318" height="178" style="vertical-align:top;">
                    </div>  
                     <p class="tt">1.加float:left;</p>
                     <div style="border:1px solid #0066cc;background-color:#cccccc;padding:10px; overflow:hidden;zoom:1;">
                        <img src="http://img.dwstatic.com/tv/1311/248115076493/1384164299404.jpg" width="318" height="178" style="float:left;">
                        <img src="http://img.dwstatic.com/news/1311/248093459257/1384138272611.jpg" width="318" height="178" style="float:left;">
                    </div>    
                </div>
            </div>
        </dd>
    </dl>
    <dl>
        <dt>4、解决IE6不支持position:fixed的bug</dt>
        <dd>
            <div class="codeCon">
                <p>解决方法：</p>
                <div>
                    
                    /* 除IE6浏览器的通用方法 */<br/>
                    * html,* html body{background-image:url(about:blank);background-attachment:fixed}防抖动<br/> 
                    .ie6fixedTL{position:fixed;left:0;top:0}<br/>
                    .ie6fixedBR{position:fixed;right:0;bottom:0}<br/>
                    .ie6fixed3 {
                    /* IE6浏览器的特有方法 */<br/>
                    /* IE6浏览器的特有方法 */
* html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft));<br/>top:expression(eval(document.documentElement.scrollTop))}
* html .ie6fixedBR{position:absolute;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}
                </div>
            </div>
            <div class="demoCon">
                
                <div class="mod mod-demo">
                    <p class="tt">解决前</p>
                    
                    <p class="tt">解决后</p>
                    <p class="tt">1.请看左上角</p>
                        <div class="ie6fixedTL">我在左上角</div>
                    <p class="tt">2.请看右上角</p>
                        <div class="ie6fixedTL">我在右上角</div>
                    <p class="tt">3.请看左下角</p>
                        <div class="ie6fixedTL">我在左下角</div>
                    <p class="tt">4.请看右下角</p>
                        <div class="ie6fixedBR">我在右下角</div>
                </div>
            </div>
        </dd>
    </dl>
      <dl>
        <dt>5、父级使用padding后子元素绝对定位的BUG</dt>
        <dd>
            <div class="codeCon">
                <p>解决方法：</p>
                <div>
                    
                </div>
            </div>
            <div class="demoCon">
                
                <div class="mod mod-demo" style="padding:10px;">
                    <p class="tt">解决前</p>
                    <div style="width:100px; height:100px; background-color:#fff; border:1px solid #ddd; position:absolute; left:10px;">
                        <div style=" position:absolute; left:10px;">
                    </div>
                    <p class="tt">解决后</p>
                  
                </div>
            </div>
        </dd>
    </dl>
</div>
</body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers