0

我在 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>
4

2 回答 2

0

浏览器支持

  • border-radiusIE8 或更早版本不支持。
  • box-shadowIE8 或更早版本不支持。

HTML

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

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

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

于 2013-03-27T16:53:20.883 回答
0

使用库 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('');
      });
   }
});
于 2013-11-14T13:21:05.753 回答