none
IE10以降・互換表示なしでの<position>の挙動について RRS feed

  • 質問

  • 失礼します。表題の件、お知恵をお貸しください。

    下記ソースにて、テーブルのセル上に文字列をかぶせたコンテンツを運用していますが、
    IE10以降で想定どおりに動作しなくなりました。
    (※実際にはスクリプトによる動的生成ですが、サンプルとして固定化・簡略化しています)

    ・IE9以前&IE10以降(互換表示モード)……想定どおり(文字列がテーブル内に収まる)
    ・IE10以降(ネイティブモード)……<pre>~</pre>タグ部分で文字列が下へずれる(セルから飛び出す)

    Web上のノウハウでは、「Widthを設定する」などの対策が記載されていましたが、
    ・親要素側でのwidth指定……効果なし
    ・<pre>タグ内でのwidth指定……1コマが広がってしまう
    という結果になっています。

    本コンテンツは、会議室予約の時間帯表示を擬似的に再現するものです。
    ・COLSPANで単位時間分のセルを繋げ、色を変えて「予約あり」を表現
    ・その上に予約内容の文字列をかぶせる(が、セル幅に影響してはならない)
    という処理を行っています。

    IE10以降(互換表示なし)で、なんとか元の挙動を再現する方法はないでしょうか。

    よろしくお願いいたします。

    #CSSの記述が消える件、ご指摘ありがとうございます。(コードブロックで貼り直しても消えるんですね……)
    #その部分だけ全角にしました。よろしくお願いします。

    <html>
    <table width=100% border=1>
    <td bgcolor="#FFFFFF" height=20> </td>
    <td bgcolor="#FFFFFF" height=20> </td>
    <td bgcolor="#FF0000" height=20 COLSPAN=10><a href="リンク先">●</a><pre style= position:absolute;>このように文章をかぶせて表示したい</pre></td>
    <td bgcolor="#FFFFFF" height=20> </td>
    <td bgcolor="#FFFFFF" height=20> </td>
    <td bgcolor="#FFFFFF" height=20> </td>
    <td bgcolor="#FFFFFF" height=20> </td>
    <td bgcolor="#FFFFFF" height=20> </td>
    <td bgcolor="#FFFFFF" height=20> </td>
    <td bgcolor="#FFFFFF" height=20> </td>
    <td bgcolor="#FFFFFF" height=20> </td>
    </tr>
    </table>
    </html>







    2015年2月13日 3:19

回答

  • pre 要素に同時に position : absolute と margin:0 と display:inline-block を指定すれば、最近 IE や Firefox Chrome などでもキャプチャーのように表示できます。ちなみに、先ほどのコメントで添付したキャプチャーは IE11 での表示です。

    下に配置されてしまう原因は、display の値が block (pre 要素の規定) になっていることが原因です。a 要素と同じ行内に並べるために、inline-block を明示します。

    absolute 指定時に、top や left などの位置を明示しなければ、位置には auto が適用され、その配置は通常のレイアウトフローから外れるだけとなります。つまり、SLJ Sanami さんが期待しているであろう、フライアウトの状態が実現できるはずです。


    • 編集済み yomotsuMVP 2015年2月18日 9:15
    • 回答としてマーク SLJ Sanami 2015年2月19日 4:31
    2015年2月18日 9:13
  • 実際にどのようになればよいかがキャプチャーなどで示されていないため、想像からですが、たとえば以下のような感じでしょうか?

    * 投稿時に `position` が削除されてしまうのでスペースを空けています

    <html>
    <table width=100% border=1>
    <td bgcolor="#FFFFFF" height=20> </td>
    <td bgcolor="#FFFFFF" height=20> </td>
    <td bgcolor="#FF0000" height=20 COLSPAN=10><a href="リンク先">●</a><pre style="posi tion:absolute; display:inline-block; margin: 0;">このように文章をかぶせて表示したい</pre></td>
    <td bgcolor="#FFFFFF" height=20> </td>
    <td bgcolor="#FFFFFF" height=20> </td>
    <td bgcolor="#FFFFFF" height=20> </td>
    <td bgcolor="#FFFFFF" height=20> </td>
    <td bgcolor="#FFFFFF" height=20> </td>
    <td bgcolor="#FFFFFF" height=20> </td>
    <td bgcolor="#FFFFFF" height=20> </td>
    <td bgcolor="#FFFFFF" height=20> </td>
    </tr>
    </table>
    </html>




    • 編集済み yomotsuMVP 2015年2月13日 15:30
    • 回答の候補に設定 星 睦美 2015年2月17日 5:44
    • 回答としてマーク 星 睦美 2015年2月18日 8:23
    2015年2月13日 15:28
  • position : absolute は親要素が ぽじしょん:すたちっく以外の値を持つとき親要素からの相対位置、それ以外はbodyからの相対位置に配置されます。その上でposition の既定値は static です。そもそもの使い方が間違っているようには思います。

    今どき(IE8以降)であれば:before疑似要素を使ってスタイル操作だけで表示・非表示を切り替えるんでしょうが…書かれているタグを見る限り根本的に設計が古そうでどうにも…。



    • 編集済み 佐祐理 2015年2月16日 5:02 いい加減、バグを直してください
    • 回答としてマーク 星 睦美 2015年2月18日 8:22
    2015年2月16日 5:01

すべての返信

  • MSDNフォーラムのバグでCSS形式の記述は消えてしまいます。おかげで肝心の質問内容が読み取れません。全角文字などで代替して書き直してもらえますか?
    2015年2月13日 4:14
  • 実際にどのようになればよいかがキャプチャーなどで示されていないため、想像からですが、たとえば以下のような感じでしょうか?

    * 投稿時に `position` が削除されてしまうのでスペースを空けています

    <html>
    <table width=100% border=1>
    <td bgcolor="#FFFFFF" height=20> </td>
    <td bgcolor="#FFFFFF" height=20> </td>
    <td bgcolor="#FF0000" height=20 COLSPAN=10><a href="リンク先">●</a><pre style="posi tion:absolute; display:inline-block; margin: 0;">このように文章をかぶせて表示したい</pre></td>
    <td bgcolor="#FFFFFF" height=20> </td>
    <td bgcolor="#FFFFFF" height=20> </td>
    <td bgcolor="#FFFFFF" height=20> </td>
    <td bgcolor="#FFFFFF" height=20> </td>
    <td bgcolor="#FFFFFF" height=20> </td>
    <td bgcolor="#FFFFFF" height=20> </td>
    <td bgcolor="#FFFFFF" height=20> </td>
    <td bgcolor="#FFFFFF" height=20> </td>
    </tr>
    </table>
    </html>




    • 編集済み yomotsuMVP 2015年2月13日 15:30
    • 回答の候補に設定 星 睦美 2015年2月17日 5:44
    • 回答としてマーク 星 睦美 2015年2月18日 8:23
    2015年2月13日 15:28
  • 補足ありがとうございます。

    ご指摘のとおり、IE9以前/互換表示では、貼っていただいたキャプチャ画像のとおりになってくれますが、
    IE10以降のネイティブ表示では、文字が表の下に表示されてしまいます。

    FireFoxなどでも後者と同じ挙動をするという事は、本来こちらがCSSの仕様的には正しい挙動であって、
    IE9以前では「間違って偶然できてしまっていた」という事なのでしょうか……

    2015年2月16日 4:28
  • position : absolute は親要素が ぽじしょん:すたちっく以外の値を持つとき親要素からの相対位置、それ以外はbodyからの相対位置に配置されます。その上でposition の既定値は static です。そもそもの使い方が間違っているようには思います。

    今どき(IE8以降)であれば:before疑似要素を使ってスタイル操作だけで表示・非表示を切り替えるんでしょうが…書かれているタグを見る限り根本的に設計が古そうでどうにも…。



    • 編集済み 佐祐理 2015年2月16日 5:02 いい加減、バグを直してください
    • 回答としてマーク 星 睦美 2015年2月18日 8:22
    2015年2月16日 5:01
  • pre 要素に同時に position : absolute と margin:0 と display:inline-block を指定すれば、最近 IE や Firefox Chrome などでもキャプチャーのように表示できます。ちなみに、先ほどのコメントで添付したキャプチャーは IE11 での表示です。

    下に配置されてしまう原因は、display の値が block (pre 要素の規定) になっていることが原因です。a 要素と同じ行内に並べるために、inline-block を明示します。

    absolute 指定時に、top や left などの位置を明示しなければ、位置には auto が適用され、その配置は通常のレイアウトフローから外れるだけとなります。つまり、SLJ Sanami さんが期待しているであろう、フライアウトの状態が実現できるはずです。


    • 編集済み yomotsuMVP 2015年2月18日 9:15
    • 回答としてマーク SLJ Sanami 2015年2月19日 4:31
    2015年2月18日 9:13
  • ありがとうございます、うまく表示されました!

    大変助かりました。本当にありがとうございました。

    2015年2月19日 4:31