Question

我在IE 8中的以下CSS菜单有一个问题，它不会显示 - 它显示默认列表 - 而不是其他浏览器中显示的菜单（http://interclub.org.uk）

请建议在IE 8中显示的CSS或文档的任何更正或支持或替代方案

HTML文档类型：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

包含脚本的HTML：

<link href="../default.css" rel="stylesheet" type="text/css" media="all" />

用于菜单的CSS：

#menu {
float: right;
width: 1200px;
height: 15px;
padding: 0px 10px 0px 20px;
}

#menu ul {
float: none;
margin: 0;
padding: 10px 0px 0px 50px;
list-style: none;
line-height: normal;


#menu li {
float: left;
}

#menu a {
display: block;
margin-left: 1px;
padding: 7px 8px 7px 8px;
letter-spacing: 1px;
text-decoration: none;
text-align: center;
font-family: 'Passion One', sans-serif;
font-size: 17px;
font-weight: lighter;
color: #fff;
background-color:#009900
}

#menu a:hover, #menu .current_page_item a {
text-decoration: none;
background: #A0190A;
box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,.1);
border-radius: 5px;
color: #fff;
}

菜单HTML DIV

<div id="menu">
        <ul>
            <li><a href="../draw.htm" accesskey="1" title="">Draw &amp; Results</a></li>
            <li><a href="http://blog.interclub.org.uk" accesskey="9" title="">the 19th</a></li>
            <li><a href="../userarea/contact.php" accesskey="2" title="">Team Directory</a></li>
            <li><a href="../userarea/submit-result.php" accesskey="2" title="">Submit Result</a></li>
            <li><a href="../rules.htm" accesskey="4" title="">Rules</a></li>
            <li><a href="../faq.htm" accesskey="5" title="">FAQ</a></li>
            <li><a href="../supporting-junior-golf.htm" accesskey="3" title="">Supporting Junior Golf</a></li>
            <li><a href="../about.htm" accesskey="2" title="">About the Comp</a></li>
            <li><a href="../contactus.htm" accesskey="6" title="">Contact Us</a></li>
            <li><a href="http://ladies.interclub.org.uk" accesskey="7" title=""><img src="../images/ladieslogo.png" alt="" width="16" height="16" align="top" />Ladies Inter-Club</a></li>

        </ul>
    </div>

Answer 1

浏览器支持

border-radius是not supported by IE8 or earlier。
box-shadow是not supported by IE8 or earlier。

<强> HTML

验证HTML 42 errors。主要问题可能是由无效的HTML引起的。不同的浏览器对不良HTML的反应不同。

标题末尾似乎有一个额外的</div>标记。如果IE8通过创建不同的DOM结构对此作出反应，则可能不会应用标头的CSS选择器。

此外，许多图片标签都有一个额外的双引号字符。这也可能导致不可预测的结果。

Answer 2

尝试使用库1.4.2进行边界半径工作

的jquery

// This adds 'placeholder' to the items listed in the jQuery .support object. 
jQuery(function() {
   jQuery.support.placeholder = false;
   test = document.createElement('input');
   if('placeholder' in test) jQuery.support.placeholder = true;
});
// This adds placeholder support to browsers that wouldn't otherwise support it. 
$(function() {
   if(!$.support.placeholder) { 
      var active = document.activeElement;
      $(':text').focus(function () {
         if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
            $(this).val('').removeClass('hasPlaceholder');
         }
      }).blur(function () {
         if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
            $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
         }
      });
      $(':text').blur();
      $(active).focus();
      $('form:eq(0)').submit(function () {
         $(':text.hasPlaceholder').val('');
      });
   }
});

CSS菜单不在IE 8中显示

2 个答案: