検索/ログイン フォーム用の小さなメニューを作成しました...この言語セレクターが正しく機能しません。CSS または HTML に何か問題がありますか? position:absolute; を使用してフラグでメニューを設定しました。margin-top (「top」属性も試しました) をフラグの上に配置しましたが、mozilla firefox のレイアウトはまだオフセットされています。
すべてのブラウザで同じ方法で読み取られる CSS に指定できる属性はありますか? または、ユーザーのブラウザーを取得するために JavaScript を使用する必要がありますか?
これは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" /><title>ZapPeers</title><link rel="stylesheet" type="text/css" href="reset.css"/><link rel="stylesheet" type="text/css" href="/index_tmp.css"/><link rel="image_src" href="/favlogo.png"/><script type="text/javascript" src="/index_tmp.js"></script></head>
<body onload="textfocus()"><div id="head"><div id="noise"></div><div id="body"><img src="src.png" alt="" name="logo" width="1" height="1" border="0" class="ind" id="logo"/><div class="ind" id="win"><form id="formzap" name="form" method="post" action="" autocomplete="off"><input type="text" name="textfield" class="ind" id="textzap" onkeypress="fadefx.init('noise', 1)" onblur="fadefx.init('noise', 0)" autocomplete="off" autofocus/><button type="submit" name="button" class="ind" id="buttonzap" value=""></button></form><div id="user"><form id="formlog" name="form" method="post" action="" autocomplete="off"><input type="text" name="textfield" class="ind textlog" placeholder="e-mail address" autocomplete="off"/><input type="password" name="textfield" class="ind textlog" placeholder="password" autocomplete="off"/><button type="submit" name="button" class="ind" id="buttonlog" value=""></button></form><ul id="flag"><li><img src="src.png" alt="" name="" width="1" height="1" border="0" class="flag" id="eng" /><ul id="list"><li><a href="willkommen.html"><img title="Deutsch" src="src.png" alt="" name="" width="1" height="1" border="0" class="flag" id="ger" /></a></li><li><a href="bienvenido.html"><img title="Español" src="src.png" alt="" name="" width="1" height="1" border="0" class="flag" id="spa" /></a></li><li><a href="bienvenue.html"><img title="Français" src="src.png" alt="" name="" width="1" height="1" border="0" class="flag" id="fra" /></a></li><li><a href="benvenuto.html"><img title="Italiano" src="src.png" alt="" name="" width="1" height="1" border="0" class="flag" id="ita" /></a></li><li><a href="yokoso.html"><img title="日本人" src="src.png" alt="" name="" width="1" height="1" border="0" class="flag" id="jpn" /></a></li><li><a href="huanying.html"><img title="中国的" src="src.png" alt="" name="" width="1" height="1" border="0" class="flag" id="chi" /></a></li></ul></li></ul><p>Sign Up • Forgot User/Pass? • About</p></div></div></div></div></body></html>
これがCSSです
body{background:url(/background.png);font:13px bold Verdana,Geneva,sans-serif;color: #071c28;}
.ind{background:url(/index_tmp.png);}
img#logo{width:630px;height:225px;background-position:0 -126px;margin-top:8px;}
div#head{width:640px;height:360px;margin:10% auto 0 auto;text-align:center;}
div#win{width:392px;height:81px;margin-left:114px;margin-right:114px;margin-top:1px;background-position:-126px 0;padding:10px;}
div#user{width:392px;margin:0px;padding:0px;}
div#flags{width:16px;height:16px;margin-left:10px;margin-top:6px;float:right;}
div#body{position:relative;width:640px;height:360px;z-index:10;}
div#noise{position:absolute;width:640px;height:360px;background-image:url(./noise.gif);z-index:1;opacity:0;filter:alpha(opacity='0');}
form{padding-top:3px;}
input{border:0px;vertical-align:top;padding:4px;opacity:0.75;filter:alpha(opacity=75);margin-right:4px;}input:hover{opacity:0.9;filter:alpha(opacity=90);}input:focus{opacity:1;filter:alpha(opacity=100);outline:none;}
button{border:0px;margin-right:1px;}button:focus{outline:none;}
input#textzap{background-position:0 -105px;width:310px;height:12px;}
input.textlog{background-position: -336px -105px;width:149px;height:12px;}
button#buttonzap{background-position:0 0;width:58px;height:21px;}
button#buttonzap:hover,button#buttonzap:focus{background-position:0 -21px;}
button#buttonzap:active{background-position:0 -42px;}
button#buttonlog{background-position:-63px 0;width:58px;height:21px;}
button#buttonlog:hover,button#buttonlog:focus{background-position:-63px -21px;}
button#buttonlog:active{background-position:-63px -42px;}
p{display:block;margin:0;margin-top:6px;font-weight: bold;text-align:left;}
a:link{text-decoration:none;}a:visited{text-decoration:none;}a:hover{text-decoration:none;}a:active{text-decoration:none;}
ul,li,li a{margin:0;padding:0;list-style:none;position:relative;display:inline;width:16px;height:16px;float:inherit;}
ul#flag{width:20px;height:20px;margin-top:5px;margin-right:10px;margin-left:6px;float:left;}
ul#list{left:-3px;float:left;display:none;width:120px;height:22px;background:url(./flag_tmp.png);padding:1px;padding-top:20px;margin-top:-18px;}
ul li{margin:2px;}
li:hover ul#list{display:block;}
img.flag{background:url(/flag_tmp.png);width:16px;height:16px;}
#ita{background-position:0 -43px;}
#spa{background-position:-16px -43px;}
#fra{background-position:-32px -43px;}
#eng{background-position:-48px -43px;}
#ger{background-position:-64px -43px;}
#jpn{background-position:-80px -43px;}
#chi{background-position:-96px -43px;}
input::-webkit-input-placeholder{color:#1b3b4d;}input:hover::-webkit-input-placeholder,input:focus::-webkit-input-placeholder{color:#315e77;}
input:-moz-placeholder{color:#1b3b4d;}input:hover:-moz-placeholder,input:focus:-moz-placeholder{color:#315e77;}
input:-ms-input-placeholder{color:#1b3b4d;}input:hover:-ms-input-placeholder,input:focus:-ms-input-placeholder{color:#315e77;}
HTML 内のすべてのスペースを削除したため、以前はこれを追加していませんでしたが、ブラウザ間で異なる方法で解釈されることもわかりました。
- - - - - - - - - - - - -[編集] - - - - - - - - - - - ---
var BrowserDetect = {
init: function () {
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent))alert("firefox")
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent))alert("MSIE")
if (/Opera[\/\s](\d+\.\d+)/.test(navigator.userAgent))alert("Opera")
if (/Chrome[\/\s](\d+\.\d+)/.test(navigator.userAgent))alert("Chrome")
if (/Apple[\/\s](\d+\.\d+)/.test(navigator.userAgent))alert("Safari")
}
}
これを試して、ブラウザを数行で検出しました（最も使用されているものから）。しかし、うまくいかないようです...これを使用して、最新のソリューションとしてレイアウトの違いを変更できます。