导航 CSS 兼容性
在Chrome和Safari中不兼容,鼠标滑过之后不能显示出中文,其他浏览器都是正常的 代码如下
nbsp;html>
代码是这样的
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"><style> html, body, iframe,h1, h2, h3, h4, h5, h6, p, ol, ul, dl, dd,input, button,select, textarea, th, td, form { margin: 0; padding: 0;} ol,ul{ list-style: none;} a{ text-decoration: none;} textarea{ resize: none;} a,a:active,a:focus{ outline: none;} a:hover{ text-decoration: underline;} img{ border: none;} table{ border-collapse: collapse; border-spacing: 0;} .left_bar{ width: 161px;} .nav{ height: 88px; padding: 35px 0 35px 40px; font: narmal 12px/22px "Microsoft Yahei";} .nav li{ height: 22px; overflow: hidden; line-height: 22px;} .nav li a{ color: #727171; height: 22px; overflow: hidden; cursor: pointer;} .nav li a span{ display: block;} .nav li a i{ display: none; font-style: normal;} .nav li a:hover{ display: block; cursor: pointer; color: #093683; font-size: 14px; text-decoration: none;} .nav li a:hover span{ display: none; cursor: pointer;} .nav li a:hover i{ display: block; overflow: hidden;} .nav li .nav_hover{ display: block; cursor: pointer; color: #093683; font-size: 14px;} .nav li .nav_hover span{ display: none; cursor: pointer;} .nav li .nav_hover i{ display: block; overflow: hidden;} .nav li .nav_hover:hover{ display: block; cursor: pointer;} .nav li .nav_hover:hover span{ display: none; cursor: pointer;} .nav li .nav_hover:hover i{ display: block; overflow: hidden; font-style: normal;}</style></head><body><div class="left_bar"> <ul class="nav"> <li><a href="#" class=""><span>ABOUT US</span><i>关于我们</i></a></li> <li><a href="#" class="nav_hover"><span>MARKETING CASE</span><i>案例分享</i></a></li> <li><a href="#" class=""><span>SERVICE SYSTEM</span><i>服务体系</i></a></li> <li><a href="#" class=""><span>CONTACT US</span><i>联系我们</i></a></li> </ul></div></body></html>