CSS Menu怎么才能在谷歌浏览器中显示正常
怎么才能在谷歌浏览器中显示正常，在IE9显示也不正常，其他浏览器显示正常。
不正常的
正常的
- HTML code
<!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"><head id="Head1" runat="server"> .cn_menu { width: 170px; overflow: visible; } .jtkh { background: url(images/jtkh.jpg) no-repeat left top; text-indent: 35px; float: left; line-height: 32px; font-weight: normal; text-align: left; width: 100%; overflow: hidden; margin: 1px 0 0 0; font-weight: bold; } .jtkh.on1, .jtkh.on1 a { background: url(images/jtkh.jpg) no-repeat left -32px; line-height: 32px; color: #15428B; } .jtkh a { width: 100%; color: #15428B; text-decoration: none; float: left; font-family: 宋体; font-size: 12px; } .jtkh a:hover { background: url(images/jtkh.jpg) no-repeat left -32px; line-height: 32px; color: #15428B; font-family: 宋体; font-size: 12px; } .jtkh.on1 li { background: url(images/cn_menu_li.gif) no-repeat left top; height: 30px; text-indent: 30px; font-weight: normal; color: #666666; margin: 0; line-height: 30px; } .jtkh.on1 li.on { background: url(images/cn_menu_li.gif) no-repeat left -30px; } .jtkh.on1 li.on a { color: #333333; background: url(images/cn_menu_li.gif) no-repeat left top; } .jtkh.on1 li a { line-height: 30px; color: #666666; background: url(images/cn_menu_li.gif) no-repeat left top; } .jtkh.on1 li a:hover { background: url(images/cn_menu_li.gif) no-repeat left -30px; color: #333333; line-height: 30px; font-weight: normal; } .grkh { background: url(images/grkh.jpg) no-repeat left top; text-indent: 35px; float: left; line-height: 32px; font-weight: normal; text-align: left; width: 100%; overflow: hidden; margin: 1px 0 0 0; font-weight: bold; } .grkh.on2, .grkh.on2 a { background: url(images/grkh.jpg) no-repeat left -32px; line-height: 32px; color: #15428B; } .grkh a { width: 100%; color: #15428B; text-decoration: none; float: left; } .grkh a:hover { background: url(images/grkh.jpg) no-repeat left -32px; line-height: 32px; color: #15428B; } .grkh.on2 li { background: url(images/cn_menu_li.gif) no-repeat left top; height: 30px; text-indent: 30px; font-weight: normal; color: #666666; margin: 0; line-height: 30px; } .grkh.on2 li.on { background: url(images/cn_menu_li.gif) no-repeat left -30px; } .grkh.on2 li.on a { color: #333333; background: url(images/cn_menu_li.gif) no-repeat left top; } .grkh.on2 li a { line-height: 30px; color: #666666; background: url(images/cn_menu_li.gif) no-repeat left top; } .grkh.on2 li a:hover { background: url(images/cn_menu_li.gif) no-repeat left -30px; color: #333333; line-height: 30px; font-weight: normal; } .jcda { background: url(images/left7.jpg) no-repeat left top; text-indent: 35px; float: left; line-height: 32px; font-weight: normal; text-align: left; width: 100%; overflow: hidden; margin: 1px 0 0 0; font-weight: bold; } .jcda.on3, .jcda.on3 a { background: url(images/left7.jpg) no-repeat left -32px; line-height: 32px; color: #15428B; } .jcda a { width: 100%; color: #15428B; text-decoration: none; float: left; } .jcda a:hover { background: url(images/left7.jpg) no-repeat left -32px; line-height: 32px; color: #15428B; } .jcda.on3 li { background: url(images/cn_menu_li.gif) no-repeat left top; height: 30px; text-indent: 30px; font-weight: normal; color: #666666; margin: 0; line-height: 30px; } .jcda.on3 li.on { background: url(images/cn_menu_li.gif) no-repeat left -30px; } .jcda.on3 li.on a { color: #333333; background: url(images/cn_menu_li.gif) no-repeat left top; } .jcda.on3 li a { line-height: 30px; color: #666666; background: url(images/cn_menu_li.gif) no-repeat left top; } .jcda.on3 li a:hover { background: url(images/cn_menu_li.gif) no-repeat left -30px; color: #333333; line-height: 30px; font-weight: normal; } </style> <script type="text/javascript"> function SwitchMenu(obj) { var el = document.getElementById(obj); var ar = document.getElementById("masterdiv").getElementsByTagName("ul"); if (el.style.display != "block") { for (var i = 0; i < ar.length; i++) { ar[i].style.display = "none"; } el.style.display = "block"; } else { el.style.display = "none"; } //设置on样式 if (obj == "sub1") { $("li[name^='li_']").removeClass("on5"); $("li[name='li_" + obj + "']").addClass("on3"); $("li[name='li_" + obj + "']").addClass("on4"); $("li[name^='li_']").removeClass("on2"); $("li[name='li_" + obj + "']").addClass("on1"); } if (obj == "sub2") { $("li[name^='li_']").removeClass("on1"); $("li[name^='li_']").removeClass("on5"); $("li[name='li_" + obj + "']").addClass("on3"); $("li[name='li_" + obj + "']").addClass("on4"); $("li[name='li_" + obj + "']").addClass("on2"); } if (obj == "sub3") { $("li[name^='li_']").removeClass("on1"); $("li[name^='li_']").removeClass("on5"); $("li[name='li_" + obj + "']").addClass("on2"); $("li[name='li_" + obj + "']").addClass("on4"); $("li[name='li_" + obj + "']").addClass("on3"); } } </script></head><body> <div id="div_left" class="cn_menu" runat="server"> <ul id="masterdiv" style="margin-left: 0px; margin-bottom: 0px"> <li id="lii_1" name="li_sub1" runat="server" class="jtkh"><a href="#" onclick="SwitchMenu('sub1')"> 集体考核</a> <ul id="sub1" style="display: none; margin-left: 0px;"> <li id="li_1" runat="server"><a href="#" target="_self">绩效考核</a></li> <li id="li_2" runat="server"><a href="#" target="_self">得分对比分析</a></li> <li id="li_3" runat="server"><a href="#" target="_self">得分统计分析</a></li> <li id="li_4" runat="server"><a href="#" target="_self">查询考核记录</a></li> </ul> </li> <li id="lii_2" name="li_sub2" runat="server" class="grkh"><a href="#" onclick="SwitchMenu('sub2')"> 个人考核</a> <ul id="sub2" style="display: none; margin-left: 0px;"> <li id="li_6" runat="server"><a href="#" target="_self">绩效考核</a></li> <li id="li_7" runat="server"><a href="#" target="_self">得分对比分析</a></li> <li id="li_8" runat="server"><a href="#" target="_self"> 得分统计分析</a></li> <li id="li_9" runat="server"><a href="#" target="_self">查询考核记录</a></li> </ul> </li> <li id="lii_3" name="li_sub3" runat="server" class="jcda"><a href="#" onclick="SwitchMenu('sub3')">考核设定</a> <ul id="sub3" style="display: none; margin-left: 0px;"> <li id="li_11" runat="server"><a href="#" target="_self">考核表管理</a></li> <li id="li_12" runat="server"><a href="#" target="_self">添加考核项目</a></li> <li id="li_13" runat="server"><a href="#" target="_self">修改考核项目</a></li> <li id="li_14" runat="server"><a href="#" target="_self">附加分管理</a></li> </ul> </li> </ul> </div></body></html>
[解决办法]
style="background:#ffffff url(/images/bg.gif) center repeat-x; height:35px; overflow:hidden;"
类似这样的写法： background: #ffffff 背景颜色为白色,url(/images/bg.gif) 背景图片设置，center 背景图片位置， repeat-x，横向平铺(X轴)， height：35px 高度是35像素，overflow:hidden,超出设置隐藏。