CSS 在 Opera 和 IE 中看起来很糟糕；我应该从哪里开始？

Question

我刚刚完成了我的网站，它在 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 中的一些……休息很好。

谢谢

Answer 1

您可以使用以下网站来验证您的 CSS 是否符合 W3C 标准：

http://jigsaw.w3.org/css-validator/

它会检查您的 CSS，检查兼容性，并在错误存在时返回错误。它会向您显示文件中的哪些错误，以便您修复它们。我不知道任何可以为您修复 CSS 的工具……但我不会使用它，因为我不会那样学习任何东西。

您可以使用以下网站来验证您使用的 HTML 和其他标记语言：

http://validator.w3.org/

这些都是我在开发时经常使用的令人难以置信的工具。我还建议安装Web Developer Toolbar 和Firebug 以使您在开发时更轻松。

使用这些工具将帮助您制作跨浏览器兼容的网站...如果某些内容不兼容，您可以使用这些工具来调试和修复您的工作。

我希望这会有所帮助！

Answer 2

据我所知，没有一个真正好的调试 CSS 的应用程序。不过，你有正确的顺序。从 firefox 开始，然后是 chrome / safari、opera、IE。不过，我会根据使用情况将 IE 置于歌剧之上。

您应该能够让这些浏览器正常工作。对于 IE，请查看conditional comments 以仅将其他 CSS 应用于 IE。您可以覆盖其他样式来纠正 IE 中看起来不太好的东西。

Answer 3

如果您还没有使用它，我可以推荐使用 CSS RESET。 那应该消除大多数跨浏览器bs。 它为您留下了更明显的浏览器特定错误，这些错误可以通过特定的 css 文件轻松修复，使用条件 cmets 完成。

为了测试我做firefox，chrome，ie 8，ie 7，ie 6，opera，safari。 有些应用程序会向您显示您没有的浏览器的屏幕截图，例如 browsershots。但是我发现它们并没有真正的帮助，如果它在 ie 7 和 8 中显示良好，chrome 和 FF 我很高兴。

也许不会直接回答您的问题，但它可以帮助避免一开始就出现过多的不一致。 :)