Maison >interface Web >tutoriel HTML >CSS求救，SOS_html/css_WEB-ITnose
CSS求救，SOS_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-21 09:12:57940parcourir
<!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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <meta content="test" name="keywords" /> <meta content="test" name="description" /> <link href="image/favicon.ico" type="image/x-icon" rel="icon" /> <link href="image/favicon.ico" type="image/x-icon" rel="shortcut icon" /> <link type="text/css" rel="stylesheet" href="css/style.css" /> <link type="text/css" rel="stylesheet" href="css/upDateStyle.css" /> <script type="text/javascript"> window.top["BNPage"] = 0; </script> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/offlights.js"></script> <script type="text/javascript" src="js/ckplayer.js" charset="utf-8"></script> <script type="text/javascript" src="js/md5.js"></script> <script type="text/javascript" src="js/style.js"></script> <script type="text/javascript" src="js/updateStyle.js"></script> <script type="text/javascript" src="js/map.js"></script> <style type="text/css"> body { background-image: url(image/bg.jpg); background-repeat: repeat; } </style></head><body> <div id="BNreturnTopDiv"> </div> <div class="fwtop"> <div class="fwtop_cont"> <div class="fwtop_logo"> <div class="top_logo" id="top_logo"> <a href="index.html"> <img src="image/logo.png" width="170" style="max-width:90%" alt="网站Logo" title="test" /></a> </div> </div> <div class="fwtop_info"> <div class="topLanguage" id="topLanguage"> <div class="language"> <div id="languageContent"> 选择语言:</div> <div class="languageSelect" onmouseover="displayLanguage($(this))" onmouseout="hideLanguage(event,$(this))" id="language"> <span class="select_languageInfo" id="select_languageInfo"><a href="javascript:void(0)" rel="1">简体中文</a></span> <span class="select_language" id="select_language"> <ul> <li><a href="javascript:void(0)" rel="1">简体中文</a></li> </ul> </span> </div> </div> <script type="text/javascript"> siteLanguage() </script> </div> <div class="topSearch clear" id="topSearch"> <div class="search"> <input type="text" id="siteSearchContent" value="请输入关键字..." class="enter"> <div class="select" onmouseover="displaySiteSearch($(this))" onmouseout="hideSiteSearch(event,$(this))" id="search"> <span class="select_info" id="siteSelect_info"><a href="javascript:void(0)" rel="新闻"> 新闻</a></span> <span class="select_search" id="select_siteSearch"> <ul> <li><a href="javascript:void(0)" rel="新闻">新闻</a></li> <li><a href="javascript:void(0)" rel="产品">产品</a></li> <li><a href="javascript:void(0)" rel="下载">下载</a></li> <li><a href="javascript:void(0)" rel="招聘">招聘</a></li> </ul> </span> </div> <input id="siteSearchSubmit" type="button" class="btn" /> </div> <script type="text/javascript"> siteSearch() </script> <script type="text/javascript"> $("#siteSearchContent").focus(function () { if (this.value == "请输入关键字...") { this.value = "" } }); $("#siteSearchContent").blur(function () { if (this.value == "") { this.value = "请输入关键字..."; } }); </script> </div> </div> <div class="clear"> </div> <div class="fwtop_mainNav"> 上面头部部分html代码，后面部分未贴上来，比较多，下面贴一部分关键css
@charset "utf-8";/*CSSDocument*//*模板页面样式*/* { margin:0; padding:0;}body { margin:0; padding:0;}body { font-size: 12px; margin:0 auto; padding:0;}ol, ul { list-style: none outside none; padding:0; margin:0;}img { border:none;}/*前台a标签样式*/a:link, a:visited { color:#333333; text-decoration: none; outline:none;}a:hover, a:active { color:#a40000; text-decoration: none; outline:none;}/*后台a标签样式*/.edit_page a:link, .edit_page a:visited { color:#333333; text-decoration: none; outline:none;}.edit_page a:hover, .edit_page a:active { color:#a40000; text-decoration: none; outline:none;}.clear { clear:both;}.fwtop { width:1000px; overflow:hidden; margin:0 auto;}.fwtop_cont{ margin:0 auto;}.fwtop_logo { width:180px; padding-top:10px; float:left; height:60px; overflow:hidden;}/*头部信息*/.fwtop_info { float:right; position:relative; z-index:600;}.topInfo { float:left; padding:20px 0;}.topLanguage { float:right; margin-left:15px; padding:10px 0;}#languageContent { /*width:60px;*/ float:left; margin-top:4px;}.languageSelect { /*width:75px;*/ float:right;}.languageSelect { background: none repeat scroll 0 0 #FFFFFF; border:solid 1px #CCCCCC; cursor: pointer; float: left; line-height: 20px;}.select_languageInfo { background: url(../image/search_down.gif) no-repeat scroll 100% 50% transparent; padding: 0 20px 0 5px;}.select_language { background-color: #FFFFFF; border-left:solid 1px #CCCCCC; border-right:solid 1px #CCCCCC; border-bottom:solid 1px #CCCCCC; font-size: 12px; padding: 5px 0; position: absolute; width: 72px; z-index: 503; display:none;}.select_language ul li a { padding:2px 5px; display:block; width:65px;}.select_language ul li a:hover { background:#e8e8e8;}.topSearch { float:right; right:0; top:40px;}.fwtop_banner{ mardin:10px 0;}.fwmain { width:1000px; margin:0 auto; /*background:url(../image/fwmain_bg.jpg) repeat-y;*/ padding:0 20px;}.fwmain_left { width:210px; float:left;}.fwmain_left .label_head {/* background:url(../image/left_title.jpg) no-repeat;*/ overflow: hidden;/*cursor:move;*/}.fwmain_left .label_title { font-size:14px; float:left; padding-left:10px; color:#444;}.fwmain_right{ width:730px; float:right;}.fwmain_right1 { width:450px; float:left;}.fwmain_right2 { width:260px; float:right;}.fwmain_right3 {} 有问题部分代码，可以在上面代码中看比较完整的代码，这里提出来方面知道我的问题在哪儿
<div class="topSearch clear" id="topSearch"> <div class="search"> <input type="text" id="siteSearchContent" value="请输入关键字..." class="enter"> <div class="select" onmouseover="displaySiteSearch($(this))" onmouseout="hideSiteSearch(event,$(this))" id="search"> <span class="select_info" id="siteSelect_info"><a href="javascript:void(0)" rel="新闻"> 新闻</a></span> <span class="select_search" id="select_siteSearch"> <ul> <li><a href="javascript:void(0)" rel="新闻">新闻</a></li> <li><a href="javascript:void(0)" rel="产品">产品</a></li> <li><a href="javascript:void(0)" rel="下载">下载</a></li> <li><a href="javascript:void(0)" rel="招聘">招聘</a></li> </ul> </span> </div> <input id="siteSearchSubmit" type="button" class="btn" /> </div>
有问题的截图如下：
正常如图：
在360和谷歌中，没有问题，在IE和火狐中，就没有引用到样式，所有初始样式都在一个css中，整体上无大问题，就只有右上角的搜索样式有问题，其他地方也有一个类似的问题，不知道什么原因，网上找的资料也已经尝试过，没有效果， 如果样式放在行中是有效果的
求助，SOS
回复讨论(解决方案)
没人帮助么
又加啦30分，有木有人知道的回答下呢
我去，还打马。。。。。
你把通用符*{padding:0;margin:0;}去掉；换成你用到的标签名字试试……
先把所有js干掉，把要用js加?的部分直接?在html里面，然后再看?式?不?有??
如果有，那?很可能是哪?js里有什麽操作把?式重?，或改?了?面html??，?致?式失效
如果?有，那?是?式的??。
你??在行?有效，?就表明是css?先?起了用作，行??式>css文件?的?式
一?可能是?式在其它地方被重?了；
另外一?可能就是css hack引起的，特?是在IE??器中，css hack可能?致上下文的?式失效；
?有一?可能是??器本身插件?致的?式??（??可能很小了，但?有）
以上就是一?debug的思路，LZ?下心?再好好查查
先把所有js干掉，把要用js加?的部分直接?在html里面，然后再看?式?不?有??
如果有，那?很可能是哪?js里有什麽操作把?式重?，或改?了?面html??，?致?式失效
如果?有，那?是?式的??。
你??在行?有效，?就表明是css?先?起了用作，行??式>css文件?的?式
一?可能是?式在其它地方被重?了；
另外一?可能就是css hack引起的，特?是在IE??器中，css hack可能?致上下文的?式失效；
?有一?可能是??器本身插件?致的?式??（??可能很小了，但?有）
以上就是一?debug的思路，LZ?下心?再好好查查
1、我将样式和代码单独拷贝出来，没有问题
2、我将样式换一个样式表存放，也没有问题
3、原始样式在IE于火狐不行，在谷歌和360可以
4、在IE和火狐中，查看样式，未看到，所以应该是未引用到，但是同一个样式表中的其他样式又是有效的，很奇怪
以上是我自己的一个测试效果，你看看我还有什么没有想到的，帮忙回下，因为我css不是很强，就只能通过测试来定位，麻烦你了
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：纯CSS制作各种图形(多图预警)_html/css_WEB-ITnoseArticle suivant：60个CSS代码段_html/css_WEB-ITnose