1

网上商店包含搜索框和其后的横幅。在 Internet Explorer 8 中，横幅隐藏了搜索框右侧的按钮：

在现代浏览器中，横幅按预期显示在搜索框之后。如何强制网站也在 IE8 中工作？我查看了http://net.tutsplus.com/tutorials/html-css-techniques/9-most-common-ie-bugs-and-how-to-fix-them/

但不明白要应用哪个修复程序。

jquery, jquery-ui, 负责任的slides都用到了。

html:

<head>
  <link rel="stylesheet" href="/themes/base/jquery.ui.all.css"
        type="text/css" title="ui-theme" />
  <link href="/Content/Css/jquery.ui.menubar.css" rel="stylesheet"
        type="text/css" />
  <link href="/Content/Css/Site.css" rel="stylesheet" type="text/css" />
  <script src="/Scripts/jquery/jquery-1.8.3.min.js"></script>
  <script src="/Scripts/jquery-ui-1.9.2.custom.js"></script>
  <script src="/Scripts/responsiveslides.min.js"></script>
</head>

<body>
  <div id="container">
    <div id="header" style="margin: 0; width: 100%">
      <div class="site-topbar">
        <div class='site-topbanner'>
            <div>
              <a class="color-red" href="/Account/LogOn">Sisene</a>
            </div>
<form action="/Store/Browse" class="searchform" method="get" style="margin:0"><input class="searchfield" id="Search" name="Search" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Otsi...&#39;;}" onfocus="if (this.value == &#39;Otsi...&#39;) {this.value = &#39;&#39;;}" type="text" value="Otsi..." /><input class="searchbutton" type="submit" value="Otsi... " />
</form> 
        </div>
        <ul class="rslides">
<img src="Store/Banner?product=prod1" height='210px'  width='500px' />
     </ul>
      </div>

CSS：

.rslides {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    list-style: none;
    overflow: hidden; 
    padding: 0;
    margin: 0;
}

    .rslides li {
        -webkit-backface-visibility: hidden;
        position: absolute;
        display: none;
        left: 0;
        top: 0;
    }

        .rslides li:first-child {
            position: relative;
            display: inline-block; 
            float: left;
        }

    .rslides img {
        display: inline-block; 
        float: left;
        border: 0;
    }

    .rslides p {
        display: inline-block;
        padding: 0;
        margin: 0;
    }
4

1 回答 1

0

尝试这个：

.site-topbanner {
    float: left;
    margin-top: 80px; /* to counteract losing vertical alignment due to the float */
}

添加边距是因为元素现在是浮动的，并且不会遵守垂直对齐。

于 2013-09-17T18:35:32.537 回答