[英]CSS looks bad in Opera and IE; where should I start?
我刚刚完成我的网站,在FF,Safari和Chrome中看起来不错。 Opera看起来不错,但不如FF。 IE看起来非常糟糕。
是否有任何应用程序可以检查不良CSS并对其进行修复? 如果不是,跨浏览器调整网站的最简单方法是什么?
以下只是我在外观上遇到的许多问题之一...
我在index.html中有一个表单,其中包含多个输入。 在输入的右侧,我有一个“搜索”按钮,用于提交表单。 该按钮应该在右侧,但有时会在输入下方放一行以结束在左侧。 仅在Opera 10.53和IE浏览器中会发生这种情况。 (尚未测试其他Opera版本)。
这是代码:
<table border="0" align="center">
<tr>
<td>
<div class="nav_container" id="nav_container">
<div id="nav_container2" class="nav_container2">
<form id="nav_form_main" name="nav_form_main" action="/search/" target="iframe001" method="get" onSubmit="reset_and_subm();">
<div class="nav_lists" id="nav_list">
<input name="nav_querystring" type="text" id="nav_querystring" style="width: 240px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold;" value="">
<select name="nav_category_list" size="1" id="nav_category_list" style="width: 195px;" onChange="subcatSelection();">
<option value="All categories" selected>-- All categories --</option>
ALOT OF OPTIONS HERE
</select>
<select name="nav_city_list" id="nav_city_list" style="width: 180px;" onChange="areapicker();">
<option id="Hela Sverige" value="Hela Sverige" selected>-- Hela Sverige --</option>
ALOT OF OPTIONS HERE
</select>
<input type="submit" name="nav_submit" id="nav_submit" value="Sök" style="width: 58px; font-size: 13px;">
</div>
</div>
</td>
</tr>
</table>
这是涉及的CSS:
.nav_container2 {
position:relative;
left:0px;
top:10px;
}
.nav_container {
background-image: url(../Graphics/menu_lvl1.gif);
height: 101px;
width: 720px;
padding:0;
margin:0;
}
如果您需要更多输入,请告诉我...
当然,这是IE出现最多问题的地方...如上所述,在Opera中有些问题...其余的都很好。
谢谢
我没有一个真正好的调试CSS的应用程序。 不过,您的顺序正确。 首先是Firefox,然后是chrome / safari,opera,IE。 虽然我会根据使用情况将IE放在歌剧之上,但按重要性排序。
您应该能够使这些浏览器正常运行。 当涉及到IE浏览器,看看条件注释申请额外的CSS 只有 IE浏览器。 您可以覆盖其他样式以更正IE中看起来不太好的内容。
您可以使用以下站点来验证CSS,以查看其是否符合W3C标准:
http://jigsaw.w3.org/css-validator/
它会通过您的CSS,检查兼容性,并吐出错误(如果存在)。 它会向您显示文件中的错误位置,以便您进行修复。 我不知道有什么工具可以为您修复CSS ...我不会使用它,因为我不会那样学习。
您可以使用以下站点来验证您使用的HTML和其他标记语言:
这些都是我在开发时经常使用的难以置信的工具。 我还建议您安装Web Developer Toolbar和Firebug,以使您的开发工作更加轻松。
使用这些工具将帮助您创建跨浏览器兼容的网站...如果某些内容不兼容,则可以使用这些工具来调试和修复您的工作。
我希望这有帮助!
如果您尚未使用它,我建议您使用CSS RESET。 那应该消除大多数跨浏览器bs。 它给您留下了更明显的浏览器特定错误,这些错误可以通过特定的css文件轻松修复,并通过条件注释完成。
为了测试,我做Firefox,chrome,即8,即7,即6,歌剧,野生动物园。 有些应用程序会向您显示您没有的浏览器的屏幕截图,例如browsershots。 但是我发现它们并没有真正的帮助,如果它在7和8中显示的很好,那么chrome和FF我就很开心。
也许不会直接回答您的问题,但是可以避免一开始就产生过多的矛盾。 :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.