OpenPNE 3

• 修正前のCSS
  

  .recentList dl {
    border: 1px solid #CCCCCC;
    margin-bottom: 5px;
  }
  
  .recentList dt {
    float: left;
    width: 170px;
    padding: 5px;
    text-align: center;
  }
  
  .recentList dd {
    zoom: 1;
    margin-left: 180px;
    padding: 5px;
    border-left: 1px solid #CCCCCC;
  }
  
  * html #Body .recentList dd {
    height: 1.2em;
  }
  

• この問題を解消するために想定されるスタイル記述
  

  .recentList dl {
    overflow: hidden;
    clear: both;
    border: 1px solid #CCCCCC;
    margin-bottom: 5px;
  }
  
  .recentList dt {
    float: left;
    width: 170px;
    padding: 5px;
    border-right: 1px solid #CCCCCC;
    text-align: center;
  }
  
  .recentList dd {
    zoom: 1;
    margin-left: 180px;
    padding: 5px;
    border-left: 1px solid #CCCCCC;
  }
  
  * html #Body .recentList dd {
    height: 1.2em;
  }
  

• dl { overflow: hidden; clear: both; } を追加
• dt { border-right: 1px solid #CCCCCC; } を追加
  • dt の幅が {margin=0 + border=1(right) + padding=5+5 + width=170} = 181 となるが dd の margin-left は 180 とする
  • dt { border-right } と dd { border-left } を重ねることで、どちらのボックスが高くなっても境界線が想定通り表示されるようにする
    • 閲覧が想定されるブラウザで想定通りの表示となるか要確認

recentList だけでなく、commentList なども同様の修正を施す必要がありそう。同様の箇所が他にも無いか併せて確認する必要がある。

どのように修正するか¶

修正するCSSファイルの対象となるのは plugins/opSkinBasicPlugin/web/css/main.css です。

• HTML構造を簡単に示す：
  

  <div class="****List">
    <dl>
      <dt>左側（日付部分）</dt>
      <dd>右側（タイトルなど）</dd>
    </dl>
    <dl>
      <dt>左側（日付部分）</dt>
      <dd>右側（タイトルなど）</dd>
    </dl>
    ... （dl要素がアイテム数だけ繰り返される）
  </div>
  

• これに対して今回適用させるCSSを簡単に示す：
  

  dl {
    /** overflow, clear, zoom
     * いわゆる clearfix に相当する指定を行う必要があるが、
     * dt,dd内のテキストが溢れた場合のことを考えると、ここでは
     * overflow: hidden を与えることが妥当だと判断した。
     *
     * overflow プロパティ値が visible でなければ、ここでは dl 要素が子要素の高さを確保するため
     * dl に対して clear: both の指定は不要である。 dl 要素が高さを確保しない場合や dl 要素内で
     * クリアランスがされない場合でも dt 要素が回りこまないようにここでは clear 指定を残している。
     *
     * zoom は IE6/7 に対してだが、便宜的にプロパティ単位での記述とした。
     * ※スラッシュを先行させる記述 "/property: value" は IE6/7 に対するCSSハックです。
     */
    overflow: hidden;
    clear: both;
    /zoom: 1;
  }
  dt {
    float: left;
    width: {DT_WIDTH}px;
    padding: 5px;
    border-right: 1px solid #CCCCCC;
  }
  dd {
    /** margin-left プロパティ
     * 10px は dt の横paddingの合計値。
     * dt の border-right: 1px 分はここには含めず、
     * dt{border-right} と dd{border-left} を重ねる。
     */ 
    margin-left: {DT_WIDTH}+10px;
    border-left: 1px solid #CCCCCC;
  }
  * html #Body .recentList dd {
    text-indent: -3px; /* IE6の不具合に対処：後述 */
  }
  

• IE6 および IE7 の不具合に対処するため、次のことを行っている
  • dd 要素は hasLayout 値が false になるようにする
    • これが true になると dt{border-right} と dd{border-left} を重ねることができなくなる
  • IE6 ではブロックレベル要素 X, Y に対し、 X{float:left; width:**;} Y{margin-left:**;} のように float+margin で横並べをし、要素Yの hasLayout 値が false であると、要素XとYの間に隙間はできないが、要素Yの中の（全てのブロックレベル要素の中の）インラインの1行目が 3px ほど右側（書字方向）にずれるという不具合がある。この見栄えを整えるために IE6 のみ text-indent プロパティを指定している。この問題は IE7 では生じない。
    • IE6 へのスタイル記述を（プロパティ単位ではなく）セレクタ単位のCSSハックで行っていることに深い理由はない。CSSのコーディング規約が特に定められていない現状では特に制約はなく、どのように記述してもよいと考えられる。

CSS の差分¶

 /*==============================================================================
  * recentList
  *----------------------------------------------------------------------------*/
 .recentList dl {
+  overflow: hidden;
+  clear: both;
   border: 1px solid #CCCCCC;
   margin-bottom: 5px;
+  /zoom: 1;
 }

 .recentList dt {
   float: left;
   width: 170px;
   padding: 5px;
+  border-right: 1px solid #CCCCCC;
   text-align: center;
 }

 .recentList dd {
-  zoom: 1;
   margin-left: 180px;
   padding: 5px;
   border-left: 1px solid #CCCCCC;
 }

 * html #Body .recentList dd {
-  height: 1.2em;
+  text-indent: -3px;
 }

 /*==============================================================================
  * commentList
  *----------------------------------------------------------------------------*/
 .commentList dl {
+  overflow: hidden;
+  clear: both;
   border: 1px solid #CCCCCC;
   margin-bottom: 10px;
+  /zoom: 1;
 }

 .commentList dt {
   float: left;
-  width: 70px;
-  padding-top: 5px;
+  width: 60px;
+  padding: 5px;
+  border-right: 1px solid #CCCCCC;
   text-align: center;
 }

 .commentList dd {
-  zoom: 1;
-  min-height: 5.5em;
   margin-left: 70px;
   border-left: 1px solid #CCCCCC;
 }

 * html .commentList dd {
-  height: 5.5em;
+  text-indent: -3px;
 }

 #LayoutC .commentList dt {
-  width: 110px;
+  width: 100px;
 }