3

IE のみで z-index に問題があります。データベースからデータをロードすると、ロゴをスクロールでき、CSS ポップアップ ボックスに説明が表示されます。IE 以外のすべてのブラウザで正常に動作します。ポップアップ ボックスの z-index が呼び出されていないようです。現在のロゴの前に描画されたロゴの上にレンダリングされますが、後に描画されたロゴの下に表示されます。

http://tempcfo.com/testimonials.phpを参照

ここに私のコードがあります

CSS...

.thumbnail{
position: relative;
}

.thumbnail:hover{
text-decoration:none;

}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background:#E2E2E2;
background-repeat:no-repeat;
padding: 0px;
visibility: hidden;
color: black;
text-decoration: none;
width:265px;
height:195px;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding:0px;
float:left;
z-index:0;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -77px;
padding:10px;
left:135px; /*position where enlarged image should offset horizontally */
float:left;
text-decoration:none;
z-index:500;
}

.thumbnail2{
position: relative;

}

.thumbnail2:hover{
text-decoration:none;

}

.thumbnail2 span{ /*CSS for enlarged image*/
position: absolute;
background:#E2E2E2;
background-repeat:no-repeat;
padding: 0px;
visibility: hidden;
color: black;
text-decoration: none;
width:265px;
height:195px;
}

.thumbnail2 span img{ /*CSS for enlarged image*/
border-width: 0;
padding:0px;
float:right;
z-index:0;
}


.thumbnail2:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -77px;
padding:10px;
right:138px; /*position where enlarged image should offset horizontally */
float:right;
text-decoration:none;
z-index:500;

}

HTML...

<div id="logos" >
        <table cellspacing="5" >
             <tr>

            <td valign="top" bgcolor="#EDEDED" align="center" height="105" width="140">




            <a class="thumbnail"  href="#success_page" style="border:none; outline:none; cursor:default;">
            <img src="images/logo/20120830005810.png"width="85%" border="0" />


            <span>
            <table>
                <tr>
                    <td class="popup_title">
                    </td>
                </tr>
                <tr>
                    <td class="short_desc">
                    “I hired tempCFO on a contracting basis to be the first CFO of my start-up company. They performed their role extremely well, building up our chart of accounts, developing a sophisticated financial model, creating powerful board presentations and overseeing the accounting function.
-Tom Mohr, Digital Air Strike                    </td>
                </tr>
                <tr>
                    <td class="quotee">
                     Tom Mohr - Digital Air Strike                     </td>
                </tr>
            </table>
            </span>

    </a>




     <table  width="138" >


              </table>
            </td>

            <td valign="top" bgcolor="#EDEDED" align="center" height="105" width="140">




            <a class="thumbnail"  href="#success_page" style="border:none; outline:none; cursor:default;">
            <img src="images/logo/20120830005827.png"width="85%" border="0" />


            <span>
            <table>
                <tr>
                    <td class="popup_title">
                    </td>
                </tr>
                <tr>
                    <td class="short_desc">
                    Mitrionics AB is the technology leader in FPGA-based processing for Accelerated Computing, providing greater processing performance and a greener computing alternative, because of lower energy consumption.                    </td>
                </tr>
                <tr>
                    <td class="quotee">
                                         </td>
                </tr>
            </table>
            </span>

    </a>




     <table  width="138" >


              </table>
            </td>

            <td valign="top" bgcolor="#EDEDED" align="center" height="105" width="140">





            <a class="thumbnail2" href="#success_page" style="border:none;outline:none; cursor:default;">

            <img src="images/logo/20120830005843.png"width="85%" border="0" />

           <span>
            <table>
                <tr>
                    <td class="popup_title">
                    </td>
                </tr>
                <tr>
                    <td class="short_desc">
                    RelayHealth provides connectivity solutions that make it easy for consumers and healthcare organizations to securely exchange information.                    </td>
                </tr>
                <tr>
                    <td class="quotee">
                                         </td>
                </tr>
            </table>
            </span>

    </a>






     <table  width="138" >


              </table>
            </td>

            <td valign="top" bgcolor="#EDEDED" align="center" height="105" width="140">





            <a class="thumbnail2" href="#success_page" style="border:none;outline:none; cursor:default;">

            <img src="images/logo/20120830005855.png"width="85%" border="0" />

           <span>
            <table>
                <tr>
                    <td class="popup_title">
                    </td>
                </tr>
                <tr>
                    <td class="short_desc">
                    Propero Solutions offers world-class expertise in agile software development, Scrum methodology, agile project management, extreme programming (XP), lean and kanban development methods.                    </td>
                </tr>
                <tr>
                    <td class="quotee">
                                         </td>
                </tr>
            </table>
            </span>

    </a>






     <table  width="138" >


              </table>
            </td>
                         </tr>
                <tr>        
            <td valign="top" bgcolor="#EDEDED" align="center" height="105" width="140">




            <a class="thumbnail"  href="#success_page" style="border:none; outline:none; cursor:default;">
            <img src="images/logo/20120830005906.png"width="85%" border="0" />


            <span>
            <table>
                <tr>
                    <td class="popup_title">
                    </td>
                </tr>
                <tr>
                    <td class="short_desc">
                    Glam Media is the pioneer and global leader of Vertical Media—a revolutionary new media model that combines our flagship properties with curated publisher sites and their passionate, engaged audiences.                    </td>
                </tr>
                <tr>
                    <td class="quotee">
                                         </td>
                </tr>
            </table>
            </span>



    </a>

......

助けてくれてありがとう。

4

2 に答える 2

1

私はこれを理解しました。このページは古く、他の人が書いたものです。彼らはこれを使っていた

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

にアップグレードしたら

<!DOCTYPE html>

z-index が正しく機能し始めました。とてもシンプルで、何時間も無駄にしました。

于 2013-01-17T16:53:44.383 に答える
0

これは、IE が z-index を処理する方法に関係していると確信しています。Internet Explorer では、要素を配置すると、z-index 値 0 から始まる新しいスタッキング コンテキストが生成されます。したがって、z-index は正しく機能しません。親要素により高い z-index を指定すると、通常はバグが修正されます。

コードを変更する方法の例を示すことができるかどうかを確認するつもりでしたが、提供されたサンプル URL を変更しているようです。

于 2012-11-13T17:00:28.877 に答える