360 と Chrome の間の CSS コントロールフロントエンドスタイルの互換性の問題、専門家に助けを求め、オンラインで待機中、、、、、、_html/css

360 と Chrome の間の CSS コントロールフロントエンドスタイルの互換性の問題、専門家に助けを求め、オンラインで待機中、、、、、、_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:50:20

オリジナル

1013 人が閲覧しました

次のコードは、赤いフォントを追加せずに、360 と Chrome での 1 番目と 2 番目の写真の効果をそれぞれ示しています。
赤いフォントを追加した後、360 と Chrome での 3 番目と 4 番目の写真の効果をそれぞれ示しています。検索ボックスのドロップダウンボックスを作成したいと考えています。商品リストは上の入力ボックスのすぐ隣にありますが、ブラウザによって効果が異なるのはイライラします

css ">
body {
背景: #f1f2f6;
オーバーフロー: 非表示;
font-family: Microsoft yahei;
}

.ulclass {
margin-left: 280px;
margin-top: -3px;
border : 1px ソリッド #000;
幅: 308px;
.selectclass {
背景: #36C;
カラー: #FFF;

.selectclass スパン {
カラー: #FFF;
.liclass {
フォントサイズ: 12px;
.spanclass {
フロート: 右;
フォントサイズ: 12px;
マージントップ: -18px;

.header {
マージン: 0px 自動 10px;見える;
ズーム: 1;
.header .searchBox {
幅: 350 ピクセル;
背景色: #f1f2f6;
ボーダー半径: 5px ;
オーバーフロー: 表示
}
.header .searchBox .input_text {
境界線: 1px;
行の高さ: 18px;幅: 300 ピクセル;
フォントの太さ: 太字;
ボーダー左上半径: 4 ピクセル;
パディング: 10px 0 10px 10px;
文字間隔: 通常;
テキスト変換: なし;
テキスト整列: 開始;-FONT-FAMILY: TAHOMA、Helvetica、'Simsun'、サンセリフ;
.header .searchbox .input_button {
Border-section: n ONE;
幅: 38px;
マージン: 0px;
フロート: 左;
境界線: なし;
ボーダー右下半径: 4px;
ボックスシャドウ: なし;
.header .suggest {
右: 279 ピクセル;
z-index: 9999;
.navfixed {
幅: 100%;
行の高さ: 50 ピクセル;
オーバーフロー: 非表示 }

<!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"><meta http-equiv="X-UA-Compatible" content="IE=7"><link rel="shortcut icon" href="./images/favicon.ico"><style type="text/css">body {background: #f1f2f6;overflow: hidden;font-family: microsoft yahei;}.ulclass {border: 1px solid #000;list-style: none;width: 308px;padding: 0px;margin:0;}.selectclass {background: #36C;font-size: 12px;color: #FFF;}.selectclass span {color: #FFF;}.liclass {line-height: 16px;font-size: 12px;padding: 2px;}.spanclass {float: right;font-size: 12px;color: #008000;margin-top: -18px;}.header {width: 980px;height: 95px;margin: 0px auto 10px;overflow: visible;zoom: 1;}.header .searchBox {width: 350px;margin-top: 40px;float: right;background-color: #f1f2f6;border: none;border-radius: 5px;overflow: visible;position:relative;}.header .searchBox .input_text {border: 1px solid #dfdfdf;border-right: none;height: 18px;line-height: 18px;margin: 0px;width: 300px;font-size: 14px;font-weight: bold;background: #fff;float: left;border-top-left-radius: 4px;border-bottom-left-radius: 4px;padding: 10px 0 10px 10px;letter-spacing: normal;word-spacing: normal;text-transform: none;text-shadow: none;display: inline-block;text-align: start;font-family: Tahoma, Helvetica, 'SimSun', sans-serif;}.header .searchBox .input_button {border: 1px solid #00a0e5;border-left: none;height: 40px;width: 38px;padding: 0px;margin: 0px;background: #00a0e5 url(../images/search_bg.png);float: left;border: none;border-top-right-radius: 4px;border-bottom-right-radius: 4px;box-shadow: none;}.header .suggest {position:absolute;top:38px;left:0;z-index: 9999;}.navfixed {width: 100%;height: 50px;line-height: 50px;margin-top: 10px;background: #00a0e5;overflow: hidden;}</style></head><body><div class="header"><div class="searchBox"><form action="./search/index.jsp" method="post" name="search"autocomplete="off"><input class="sText input_text" type="text" name="keyword"id="keywordid" placeholder="输入应用名称搜索" onkeyup="keyupevent(event);" /><input class="sSubmit input_button" type="submit" value=""></form><div class="suggest"><ul class="ulclass"><li class="liclass" value="1" onclick="form_submit()"onmouseover="mo(this.value)">产品1</li><li class="liclass" value="2" onclick="form_submit()"onmouseover="mo(this.value)">产品2</li><li class="liclass" value="3" onclick="form_submit()"onmouseover="mo(this.value)">产品3</li><li class="liclass" value="4" onclick="form_submit()"onmouseover="mo(this.value)">产品4</li></ul></div></div></div><div id="mainnav" class="navfixed"></div></body></html>

<!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"><meta http-equiv="X-UA-Compatible" content="IE=7"><link rel="shortcut icon" href="./images/favicon.ico"><style type="text/css">body {background: #f1f2f6;overflow: hidden;font-family: microsoft yahei;}.ulclass {margin-left: 0px;margin-top: 0px;border: 1px solid #000;list-style: none;width: 308px;padding: 0px;position: absolute;background: #FFF;}.selectclass {background: #36C;font-size: 12px;color: #FFF;}.selectclass span {color: #FFF;}.liclass {line-height: 16px;font-size: 12px;padding: 2px;}.spanclass {float: right;font-size: 12px;color: #008000;margin-top: -18px;}.header {width: 980px;height: 95px;margin: 0px auto 10px;overflow: visible;zoom: 1;}.header .searchBox {width: 350px;margin-top: 40px;float: right;background-color: #f1f2f6;border: none;border-radius: 5px;overflow: visible;}.header .searchBox .input_text {border: 1px solid #dfdfdf;border-right: none;height: 18px;line-height: 18px;margin: 0px;width: 300px;font-size: 14px;font-weight: bold;background: #fff;float: left;border-top-left-radius: 4px;border-bottom-left-radius: 4px;padding: 10px 0 10px 10px;letter-spacing: normal;word-spacing: normal;text-transform: none;text-shadow: none;display: inline-block;text-align: start;font-family: Tahoma, Helvetica, 'SimSun', sans-serif;}.header .searchBox .input_button {border: 1px solid #00a0e5;border-left: none;height: 40px;width: 38px;padding: 0px;margin: 0px;background: #00a0e5 url(../images/search_bg.png);float: left;border: none;border-top-right-radius: 4px;border-bottom-right-radius: 4px;box-shadow: none;}.header .suggest {position: relative;z-index: 9999; float:left;padding-right: 100%;}.navfixed {width: 100%;height: 50px;line-height: 50px;margin-top: 10px;background: #00a0e5;overflow: hidden;}</style></head><body><div class="header"><div class="searchBox"><form action="./search/index.jsp" method="post" name="search"autocomplete="off"><input class="sText input_text" type="text" name="keyword"id="keywordid" placeholder="输入应用名称搜索" onkeyup="keyupevent(event);" /><input class="sSubmit input_button" type="submit" value=""><div class="suggest"><ul class="ulclass"><li class="liclass" value="1" onclick="form_submit()"onmouseover="mo(this.value)">产品1</li><li class="liclass" value="2" onclick="form_submit()"onmouseover="mo(this.value)">产品2</li><li class="liclass" value="3" onclick="form_submit()"onmouseover="mo(this.value)">产品3</li><li class="liclass" value="4" onclick="form_submit()"onmouseover="mo(this.value)">产品4</li></ul></div></form></div></div><div id="mainnav" class="navfixed"></div></body></html>