我们的一位前开发人员在开发我们内部 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,但根据我收集到的信息,我推测上面的内容指示下拉菜单出现在“为什么从我们这里购买”顶部导航菜单项下方。正如我提到的,这在 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 在内的所有浏览器中一致显示的替代/更简单的方法?
提前致谢。
最佳答案
定位是通过这段代码完成的:
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/
关于php - IE 所需的 CSS/Javascript 下拉导航修复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10798474/