0

内部 PHP フレームワークの最初のバージョンの 1 つに取り組んでいた元開発者が、javascript を使用してメイン ナビゲーションのドロップダウン要素を統合しました。CSS ディスプレイを使用しているにもかかわらず、ドロップダウンがオフセットされて表示される IE8 に修正を適用する必要があります。 Firefox / Chrome で問題ありません。

問題のサイトはhttp://www.benchmemorials.co.uk/

メインナビゲーションからドロップダウンを使用するサブメニュー項目がある場合、これを表示するためにjavascriptが呼び出されます（以下）...

<script type="text/javascript">
$(document).ready(function() {
var position = $('#link_why-buy-from-us').offset();
$('.dropdown').css(position);
$('#link_why-buy-from-us').mouseover(function() {
$('.dropdown').show();
});
$('.dropdown').mouseover(function() {
$('.dropdown').show();
});
$('.dropdownstyle').mouseover(function() {
$('.dropdown').show();
});
$('#link_why-buy-from-us').mouseleave(function() {
$('.dropdown').hide();
});
$('.dropdown').mouseleave(function() {
$('.dropdown').hide();
});
$('.dropdownstyle').mouseleave(function() {
$('.dropdown').hide();
});
});
</script>

私は JavaScript にあまり熱心ではありませんが、私が集めたものから、上記は「なぜ私たちから購入するのか」トップ ナビゲーション メニュー項目の下にドロップダウンが表示されるように指示していると推測します。前述のとおり、これは Firefox/Chrome で期待どおりに機能しています。

ただし、問題は、ラインに沿ったどこかで、インライン CSS がドロップダウン クラスに対して動的に生成されているという事実にあるようです。これは動的に生成されています。

style="top: 61px; left: 964px; display: none;"

サーバー上のすべてのファイルが検索されましたが、これはどこにも指定されていません。私の唯一の推測は、上記の JavaScript が何らかの形で CSS のこの行を作成しているため、IE のみのスタイルシートでドロップダウンの位置を変更して表示を修正することを妨げていることです。 IE8で。

php ファイルのドロップダウン メニューの残りのコードは次のとおりです。

<div class="dropdown"><div class="dropdownstyle">
<?php
mysql_select_db($database_config, $config);
            $query_sub_pages = "SELECT * FROM `pages` WHERE site_id = '".$current_site_id."' AND menu_location = 'sub' ORDER BY `order` ASC";
            $sub_pages = mysql_query($query_sub_pages, $config) or die(mysql_error());
            $row_sub_pages = mysql_fetch_assoc($sub_pages);
            $totalRows_sub_pages = mysql_num_rows($sub_pages);
            $current_sub_link = 0;
do {
$current_sub_link = $current_sub_link + 1;
?>
<p<?php if ($current_sub_link != $totalRows_sub_pages) {echo ' style="margin-bottom: 10px;"';}; ?>><a class="sub_link" href="<?php echo $site_base.$row_sub_pages['page_location']; ?>"><?php echo $row_sub_pages['page_display_name']; ?></a></p><?php //if ($current_sub_link != $totalRows_sub_pages) {echo '<br />';}; ?>
<?php } while ($row_sub_pages = mysql_fetch_assoc($sub_pages)); ?>
</div>
</div>

ご覧のとおり、.dropdown にはインライン CSS が適用されていません。ブラウザで要素を調べると、スタイルシートのすべての CSS を表示できます。

この動的 CSS ポジショニングが生成されないようにする方法または可能かどうか、またはドロップダウンが IE を含むすべてのブラウザーで一貫して表示されるようにする代替/簡単な方法を教えてください。

前もって感謝します。

4

1 に答える 1

0

ポジショニングは、次のコードによって行われます。

var position = $('#link_why-buy-from-us').offset();
$('.dropdown').css(position);

ドキュメントに対して #link_why-buy-from-us の位置を取り、.dropdown 要素に追加します。

あなたが jQuery に精通しているかどうかはわかりませんが、上記のコードはその JavaScript ライブラリーを使用して記述されています。.offset() に関する詳細なドキュメントについては、http://api.jquery.com/offset/ を参照してください。

于 2012-06-04T18:49:02.090 に答える