ホームページ >ウェブフロントエンド >htmlチュートリアル >ヘルプ用の CSS、SOS_html/css_WEB-ITnose
ヘルプ用の CSS、SOS_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:12:57940ブラウズ
<!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" height="50" 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 と Google では、問題はありません。 IE と Firefox では、すべての初期スタイルが 1 つの css 内にありますが、全体的には大きな問題はありません。他の場所でも同様の問題が発生します。理由はわかりません。ネットで見つけた情報も試しましたが、効果はありません。
助けて、SOS ディスカッション（解決策）に
誰か手伝ってくれる人はいますか？
さらに 30 点追加しました。答えを知っている人はいますか？
馬を倒しに行きます。 。 。 。 。
ユニバーサルシンボル *{padding:0;margin:0;}; を削除できます。使用するタグ名に置き換えてみてください...
まず js をすべて削除し、追加する必要がある部分を js で追加しますHTML に直接アクセスして、形式を確認して問題があるかどうかを確認します。問題がある場合は、js で形式をリセットするか、HTML 形式を変更する操作がある可能性があります。 ? 無効です
ある場合、それは正式な問題です。
ファイルがランタイムで有効である場合は、css ファイルが最初に使用され、ランタイム > css ファイルのファイル形式が他の場所で重複していることが原因である可能性があります
別の問題が発生している可能性があります。 CSS ハック、特に IE ブラウザでは、CSS ハックによりコンテキスト スタイルが失敗する可能性があります
可能性の 1 つは、ブラウザ自体のプラグインによって引き起こされるスタイルの変更である可能性があります (??非常に小さいかもしれませんが、1 つあります)。 )
上記はデバッグのアイデアです、LZ ですか？ 決心してもう一度確認してください
まずすべての js を削除し、js で追加する必要がある部分を HTML 内に直接追加してから、フォーマットを確認してください問題があるかどうかを確認します
問題がある場合、フォーマットをリセットする、またはページの HTML コンテンツを変更するための操作はどこにありますか?
問題がない場合は? , それなら形式的な質問です。
別の問題が発生している可能性があります。 CSS ハック、特に IE ブラウザでは、CSS ハックによりコンテキスト スタイルが失敗する可能性があります
可能性の 1 つは、ブラウザ自体のプラグインによってスタイルが変更される可能性があります (??非常に小さいかもしれませんが、それはあります)。 )
上記はデバッグのアイデアです、LZ ですか？ 決心してもう一度確認してください
1. スタイルとコードを別々にコピーしました、問題ありません
2. スタイルをコピーしました スタイルを変更しても問題ありませんシートに保存します
3. 元のスタイルは IE と Firefox では機能しませんが、Google と 360 では機能します
4. IE と Firefox では、スタイルを確認できますが、表示されないので、参照されていませんが、同じです。スタイルシート内の他のスタイルは有効です。これは非常に奇妙です
上記は私自身のテスト結果です。私のCSSはあまり良くないので、助けてください。強いので、見つけるためのテストしかパスできません、ごめんなさい
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。