Question

enter image description here

我为搜索/登录表单创建了这个小菜单... 有这种语言选择器无法正常工作，我在CSS或HTML中做错了什么？我使用一个位置设置了menù的旗帜：绝对;并且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")
   }
}

我已经尝试过在几行中检测浏览器（从最常用的）。但它似乎不起作用...... 我可以用它来改变布局差异作为最新的解决方案。

Answer 1

某些样式表可以帮助您

http://meyerweb.com/eric/tools/css/reset/

此重置浏览器差异

但您需要针对您需要的具体规则进行调整

您还可以使用jQuery动态添加类似body标签的类，并隔离规则

http://api.jquery.com/jQuery.browser/

http://api.jquery.com/addclass/

解决浏览器之间的布局差异

1 个答案: