1

Web ショップには、その後に検索ボックスとバナーがあります。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、責任あるスライドが使用されます。

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 に答える