Heim > Artikel > Web-Frontend > CSS中英文导航_html/css_WEB-ITnose
CSS中英文导航_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:21:581014Durchsuche
导航 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> Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：怎样制作一个有后台数据库的简单网站？_html/css_WEB-ITnoseNächster Artikel：如何实现：上面的div根据内容自动高度，下面的div自动铺满剩余高度_html/css_WEB-ITnose