ホームページ ウェブフロントエンド htmlチュートリアル ヘルプ用の CSS、SOS_html/css_WEB-ITnose

ヘルプ用の CSS、SOS_html/css_WEB-ITnose

Jun 21, 2016 am 09:12 AM

<!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 ファイルが最初に使用され、ランタイム > css ファイルのファイル形式が他の場所で重複していることが原因である可能性があります

別の問題が発生している可能性があります。 CSS ハック、特に IE ブラウザでは、CSS ハックによりコンテキスト スタイルが失敗する可能性があります

可能性の 1 つは、ブラウザ自体のプラグインによってスタイルが変更される可能性があります (??非常に小さいかもしれませんが、それはあります)。 )

上記はデバッグのアイデアです、LZ ですか? 決心してもう一度確認してください

1. スタイルとコードを別々にコピーしました、問題ありません
2. スタイルをコピーしました スタイルを変更しても問題ありませんシートに保存します
3. 元のスタイルは IE と Firefox では機能しませんが、Google と 360 では機能します
4. IE と Firefox では、スタイルを確認できますが、表示されないので、参照されていませんが、同じです。スタイルシート内の他のスタイルは有効です。これは非常に奇妙です
上記は私自身のテスト結果です。私のCSSはあまり良くないので、助けてください。強いので、見つけるためのテストしかパスできません、ごめんなさい

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? 公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか?この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース(写真、CSS、JSなど)やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

WebページのPNG画像にストローク効果を効率的に追加する方法は? WebページのPNG画像にストローク効果を効率的に追加する方法は? Mar 04, 2025 pm 02:39 PM

この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています

&lt; datalist&gt;の目的は何ですか 要素? &lt; datalist&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

この記事では、HTML&lt; Datalist&GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

&lt; Progress&gt;の目的は何ですか 要素? &lt; Progress&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

この記事では、HTML&lt; Progress&gt;について説明します。要素、その目的、スタイリング、および&lt; meter&gt;との違い要素。主な焦点は、&lt; Progress&gt;を使用することです。タスクの完了と&lt; Meter&gt; statiの場合

HTML5&lt; time&gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? HTML5&lt; time&gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? Mar 12, 2025 pm 04:05 PM

この記事では、html5&lt; time&gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

&lt; meter&gt;の目的は何ですか 要素? &lt; meter&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

この記事では、html&lt; meter&gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化&lt; Meter&gt; &lt; Progress&gt;およびex

See all articles