いくつかのよく使われるCSS hackコード

3642 ワード
css ie 6 clearfix fixed hack max-width レジャー
一.クリアコード:ブラウザによってデフォルトの初期値が異なるため、クリアコードでこれらのデフォルト値を0に高くする必要があります.

  
  
  
  
    
   
   
   
   
  1. 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 { 
    2. 
   
   
   
   
  2. margin: 0; 
    3. 
   
   
   
   
  3. padding: 0; 
    4. 
   
   
   
   
  4. } 
    5.

二.clearfix:外部コンテナとしてDIVがある場合、内部のDIVがfloatスタイルに設定されている場合、外部のコンテナDIVは内部にclearがないため、開けられません.次のコードで解決できます.

  
  
  
  
    
   
   
   
   
  1. .clearfix:after{ 
    2. 
   
   
   
   
  2.     content:"."; 
    3. 
   
   
   
   
  3.     display:block; 
    4. 
   
   
   
   
  4.     height:0; 
    5. 
   
   
   
   
  5.     clear:both; 
    6. 
   
   
   
   
  6.     visibility:hidden; 
    7. 
   
   
   
   
  7. } 
    8. 
   
   
   
   
  8.  
    9. 
   
   
   
   
  9. * html .clearfix{ 
    10. 
   
   
   
   
  10.     height:1%; 
    11. 
   
   
   
   
  11. } 
    12.

三.ie 6はposition:fixedをサポートしていません.のBUG;

  
  
  
  
    
   
   
   
   
  1. /*  IE6         */ 
    2. 
   
   
   
   
  2. .ie6fixedTL{position:fixed;left:0;top:0} 
    3. 
   
   
   
   
  3. .ie6fixedBR{position:fixed;right:0;bottom:0} 
    4. 
   
   
   
   
  4. /* IE6         */ 
    5. 
   
   
   
   
  5. /*   IE6  bug */ 
    6. 
   
   
   
   
  6. * html,* html body{background-image:url(about:blank);background-attachment:fixed} 
    7. 
   
   
   
   
  7. * html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))} 
    8. 
   
   
   
   
  8. * 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)))} 
    9.

四.ie 6は、max-width、max-height、min-width、min-heightのBUGをサポートしていない.
  

  
  
  
  
    
   
   
   
   
  1. _width:expression((documentElement.clientWidth < 500) ? "500px" : "auto" );//  min-width 
    2. 
   
   
   
   
  2. _width:expression((documentElement.clientWidth >500) ? "500px" : "auto" );//  max-width 
    3. 
   
   
   
   
  3. _height:expression((documentElement.clientHeight<500) ? "500px" :"auto");//  min-height 
    4. 
   
   
   
   
  4. _height:expression((documentElement.clientHeight>500) ? "500px" :"auto");//  max-height 
    5.

asp.Net 2.0を3.5 WebにアップグレードConfigファイルの変更
CSS互換IE 6,IE 7,FFのテクニック