Question

我们的前开发人员在使用我们的内部PHP框架的第一个版本时，使用javascript集成了主导航的下拉元素，我需要修复应用于IE8，这导致下拉列表出现偏移，即使使用CSS在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并不热，但从我收集的内容来看，我认为上面的内容是指示下拉显示在“Why buy from us”顶部导航菜单项下方。正如我所提到的，这在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>

如您所见，没有内联CSS应用于.dropdown。如果您在浏览器中检查元素，则可以查看sylesheets中的所有CSS。

请有人可以建议如何或是否有可能阻止生成这种动态CSS定位，或者确保在所有浏览器（包括IE）中显示下拉列表的替代/更简单的方法？

提前致谢。

Answer 1

定位由以下代码完成：

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/

IE浏览器需要CSS / Javascript下拉导航修复

1 个答案: