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的应用程序并不是很好。但是你有正确的订单。从firefox开始，然后是chrome / safari，opera，IE。我会根据使用情况按重要性顺序将IE置于歌剧之上。

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

Answer 2

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

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

它将通过你的CSS，检查兼容性，并吐出错误（如果存在）。它会告诉你文件中哪些地方有错误，所以你可以修复它们。我不知道任何可以为你修复CSS的工具......我不会使用它，因为我不会那样学习任何东西。

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

http://validator.w3.org/

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

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

我希望这有帮助！

Answer 3

如果您还没有使用它，我建议您使用CSS RESET。这应该消除大部分的交叉浏览器bs。它为您留下了更明显的浏览器特定错误，可以使用特定的css文件轻松修复，使用条件注释完成。

为了测试我做firefox，chrome，即8，即7，即6，歌剧，野生动物园。有些应用程序可以显示您没有浏览器的浏览器的屏幕截图。但我发现它们并没有真正有用，如果它在7＆amp; 8，chrome和FF很开心。

也许不能直接回答你的问题，但它可以帮助避免过多的不一致开始。：）

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

3 个答案: