2

私のアプリケーションはタイムライン上でいくつかのバーを使用しています。すべての行は、この行のバーを保持するbarkeeperdivで構成されています。バーキーパーには、幅と高さの2つのスタイルプロパティもあります。

.barkeeper {
    margin-bottom: 1px;
    position: relative;
}

バーには、RichfacesとCSSホバーおよびjqueryjavascriptからのインタラクティブなajaxアクションがいくつかあります。したがって、各バーの周りにフォームがあります。この例を簡略化するために、アクションjavascriptを省略しました。

.bar {
    position: absolute;
    text-align: center;
    vertical-align: middle;
    z-index: 0;
}

<form id="j_id163:0:j_id165:0:medfrm" onmouseover="" method="post" name="j_id163:0:j_id165:0:medfrm" target="">
    <div id="bar1" class="bar antibiotic" onmouseout="" onmouseover="" style="left: 7px; width:1528px;">
        <img style="float:right;" src="endarrow.gif">
        <div class="cornr_top">
            <div></div>
        </div>
        <div style="text-align: center; direction: ltr;">Bartext </div>
        <div class="cornr_bottom">
            <div></div>
        </div>
        <script type="text/javascript">
    </div>
   <input type="hidden" value="" name="" autocomplete="off">
   <input type="hidden" value="" name="autoScroll" autocomplete="off">
   <script type="text/javascript">
   <input id="javax.faces.ViewState" type="hidden" autocomplete="off" value="" name="javax.faces.ViewState">
</form>

バーは、左と幅のパラメータを使用して絶対的に配置されます。

バーは角が丸い必要があるので、これらのcornr_topとcornr_bottomを追加しました

.cornr_top div, .cornr_top, .cornr_bottom div, .cornr_bottom {
    font-size: 1px;
    height: 3px;
    width: 100%;
}

.cornr_top {
    background: url("../img/tr.gif") no-repeat scroll right top transparent;
}

.cornr_top div {
    background: url("../img/tl.gif") no-repeat scroll left top transparent;
}

cornr_bottomクラスは、使用されている画像を除いて同じように定義されています。

最後に追加したのはこの行です

<img style="float:right;" src="endarrow.gif">

これにより、バーの端に実行中の矢印が表示され、まだ実行中であることが示されます。

これで、すべてのブラウザにこれらすべてが正しく表示されます。コーナーがコーナーに追加され、使用可能な場合、矢印はバーの右側をオーバーライドし、向こうの2つのコーナーと重なります。

Firefoxの矢印 Firefoxに矢印がありません

IE7では、矢印が新しい行に表示されます。この問題を解決するにはどうすればよいですか？

IE7の矢印 IE7に矢印がない

4

1 に答える 1

2

私は自分で解決策を見つけました。

矢印の画像タグをから変更しました

<img style="float:right;" src="endarrow.gif">

に

<img style="position:absolute; right:0px;" src="endarrow.gif">
于 2012-06-05T09:30:37.647 に答える