OpenPNE 3

修正前の状況（問題の原因）¶

上記にキャプチャを示しています。このキャプチャを基に説明します。

当該部分のセルのHTMLは次のようなものです。

<td style="background: #090">
  <div class="input" style="background: #ff0"><input type="text" /></div>
  <div class="publicFlag" style="background: #f00"><select></select></div>
  <div class="help" style="background: #ccf">i | hoge</div>
</td>

div.input は幅70%で左フロート、publicFlag は幅指定無しで右フロートしています。しかし div.help はクリアランスが指定されていません。つまり div.help の最上部は、上側の緑色枠のすぐ下です（ i という文字があることからも分かる）。

この実装では次の問題があります。

• 黄色と「全体に公開」の間に入る文字幅の単語文字列があると、そこに文字が入ってしまう
  • （厳密な説明ではありませんが）多くのブラウザは単語（連続した英字）を基本的に折り返さずに表示しようとするので、 iii のような文字列であれば1文字目だけが隙間に入ることはあまりありません。
  • この例では "i | hoge" という文字列を指定しています。fontによって文字幅が異なるため、この文字列で必ず生じるとも言えませんし、他の文字列 "a b c" などで生じる可能性もあります。文字サイズを下げた場合にも生じるかもしれません。
• セル領域内の幅に対して、その70%と「公開範囲のselect要素幅」の合計が100%以下になる保証がないため、セル幅が変わるなどした場合に div.input と div.publicFlag が意図しない位置に配置されます。またこれは、HTMLに対するレイアウト（スタイル記述）として不自然です。

修正内容¶

上記の問題に対して2点の修正を行います。

• div.help にクリアランスを与える（ clear: both プロパティを適用します）
• div.publicFlag が幅指定無しフロートしているため、div.input の 70% に対して、width: 30% を指定する
  • この場合、このままだとselect要素が黄色の右隣に配置されるため、30% 幅の中で右端に配置されるように text-align: right を指定する

この問題は、説明文（div.help内の文字列）の最初の単語が隙間に入る幅である場合に生じるという限定的な問題ですが、このあたりの設計が不適切であったという内容になります。