Question

网页是www.voteforvan.com在Firefox中当然是完美的。在IE7中，菜单没有显示，搜索框一起消失。在IE8中，搜索框不合适。有人可以帮我找到答案。

Answer 1

你的标记有很多额外/不必要的元素，因此很难准确找出造成问题的原因。

此代码本身可以正常工作（在Safari / Mac，Firefox / Mac，Opera / Mac，IE7和IE8中测试），因此您可以将其插入现有的HTML中。注意继承和级联;使用Firebug或其他东西确保你没有拿起任何现有的样式。

<!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" xml:lang="en-gb" lang="en-gb" >
  <head>
    <title>Welcome</title>
    <style type="text/css" media="screen">
      body {
        background-color: #5a5f4b;
        font: 12px/1 Helvetica, Arial, sans-serif;
      }
      ul {
        margin: 0;
        padding: 0;
      }
      li {
        float: left;
        list-style: none;
      }
      a {
        display: block;
        border-left: 1px solid #fff;
        border-top: 1px solid #cfdeff;
        padding: 0.75em 1em;
      }
      a:link,
      a:visited {
        background-color: #aeb594;
        color: #1133aa;
        text-decoration: none;
      }
      a:hover,
      a:active {
        background-color: #fff;
        color: #000;
        text-decoration: underline;
      }
      form {
        float: left;
        margin-left: 10px;
        display: inline; /* fixes double-margin float bug in IE; you can put this in a conditional stylesheet if you want */
      }
    </style>
  </head>
  <body>
    <div id="tabarea">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Meet Van</a></li>
        <li><a href="#">The News</a></li>
        <li><a href="#">Events</a></li>
        <li><a href="#">Search</a></li>
        <li><a href="#">Donate</a></li>
      </ul>
      <form method="post" action="index.php">
        <input type="text" value="search..." size="20" />
      </form>
      <br clear="all" />
    </div>
  </body>
</html>

我有IE7和IE8的两个CSS问题

1 个答案: