2012-05-29 52 views
0

我們對我們的我們內部的PHP框架的第一個版本的一個工作時,一名前開發人員集成使用JavaScript主導航的下拉元素,我需要申請IE8修復它即使使用CSS在Firefox/Chrome中顯示正常,也會導致下拉顯示偏移。CSS/JavaScript的下拉導航定位所需的IE

有問題的網站是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。如果您檢查瀏覽器中的元素,則可以查看sylesheets中的所有CSS。

請任何人都可以告訴我如何或是否有可能來防止產生這種動態CSS定位或替代/確保下拉簡單的方法似乎一直存在於所有的瀏覽器包括IE?

在此先感謝。

回答

0

的定位是通過這個代碼實現:

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

它採用#的位置link_why買,從美國相對於文檔,並將其添加到.dropdown元素。

我不知道,如果你熟悉的jQuery,但上面的代碼是使用JavaScript庫寫入。有關.offset(更多資料),看這裏:http://api.jquery.com/offset/