0

**11月17日編集**

こんにちは。この問題を適切に解決するために使用できるコードをいくつか紹介したいと思います。受け入れられた回答に記載されているように、コメントアウトされた行を含むblackbird.jsファイルを作成します。それを他のBlackbirdリソース（blackbird_icons.png、blackbird_panel.png、blackbird.css、spacer.gif）と一緒にwebappディレクトリ（私は/scripts/blackbird_1_0に置きます）のどこかに配置し、これをblackbirdの構成として次のように追加します下。5.2以降を使用している場合は、Blackbirdを完全に無効にすることを検討してください。個人的にはこれを実行したいのですが、会社の制約により5.1のままです。

//IE bug fix
configuration.add("tapestry.blackbird", "context:/scripts/blackbird_1_0/");
//    configuration.add(SymbolConstants.BLACKBIRD_ENABLED, "false");   Not available until 5.2

**編集を終了**

Webアプリケーションにグラデーションの背景画像があり、上部が暗くなり、下部が明るくなります。Firefoxでは、この画像は適切に処理され、ページを垂直方向に下にスクロールすると、暗い上部が消えます。

ただし、IEでテストを開始したとき（IE8を使用）、垂直方向にスクロールしても背景画像は画面の後ろに固定されたままです。つまり、背景画像の暗い上部が常にIEビューの上部にレンダリングされます。

背景タグにスクロールを定義するように設定しました。これで問題は解決するはずですが、IEは満足していません。

background: #470077 url( images/abcd.jpg ) repeat-x scroll;

スクロールを追加する前に古いスタイルをキャッシュしていた場合に備えて、IEのデータをクリアするようにしました。

問題のテキスト表現（x =最も暗い、o =暗い、_ =明るい、-=最も明るい）Firefox：

ページのトップ

xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
oooooooooooooooooooooooo
oooooooooooooooooooooooo
__________________________________________________
__________________________________________________

少し下にスクロール

oooooooooooooooooooooooo
__________________________________________________
__________________________________________________
--------------------------------------
--------- -----------------------------
--------------------- -----------------

IE：

ページのトップ

xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
oooooooooooooooooooooooo
oooooooooooooooooooooooo
__________________________________________________
__________________________________________________

少し下にスクロール

xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
oooooooooooooooooooooooo
oooooooooooooooooooooooo
__________________________________________________
__________________________________________________

現在のCSS：

body {

margin: 0;

padding: 0;

background: #470077 url( images/abcd.jpg ) repeat-x scroll;

text-align: justify;

font: 15px Arial, Helvetica, sans-serif;

}

問題のあるページのソース： 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"></meta>
<title>Merchant / Partner Login</title>
<link type="text/css" rel="stylesheet" href="/assets/tapestry/5.1.0.5/default.css"></link>
<link type="text/css" rel="stylesheet" href="/assets/blackbird/5.1.0.5/blackbird.css"></link>
<link type="text/css" rel="stylesheet" href="/assets/ctx/1.0-SNAPSHOT/layout/layout.css"></link>
<meta content="Apache Tapestry Framework (version 5.1.0.5)" name="generator"></meta>
<script src="/assets/scriptaculous/5.1.0.5/prototype.js" type="text/javascript"></script>
<script src="/assets/scriptaculous/5.1.0.5/scriptaculous.js" type="text/javascript"></script>
<script src="/assets/scriptaculous/5.1.0.5/effects.js" type="text/javascript"></script>
<script src="/assets/tapestry/5.1.0.5/tapestry.js" type="text/javascript"></script>
<script src="/assets/blackbird/5.1.0.5/blackbird.js" type="text/javascript"></script>
<script src="/assets/tapestry/5.1.0.5/tapestry-messages.js" type="text/javascript"></script>
</head>

<body><!-- start header -->
<div id="header">

<div id="logo">
  <h1><a href="/x/"></a></h1>
</div>
<div id="menu">
  <ul>
    <li><a href="/a/">a</a></li>
    <li><a href="b">b</a></li>
    <li><a href="c">c</a></li>
    <li class="current_page_item"><a href="d">d</a></li>
    <li><a href="e">e</a></li>
  </ul>
</div>

</div>
<!-- end header -->

<!-- start page -->
<div id="page">

<!-- start sidebar -->
<div id="sidebar">
  <ul>
    <li style="background: none;" id="search"></li>
  </ul>
</div>
<!-- end sidebar -->

<!-- start content -->
<div id="content">
  <div class="post">
    <div class="title">
     <h2>Merchant / Partner Login</h2>
    </div>
    <div class="entry">

    <!-- Most of the page content, including <head>, <body>, etc. tags, comes from Layout.tml -->

    <!-- snip content -->

    </div>
  </div>

</div>
<!-- end content -->

<br style="clear: both;"/>
</div>
<!-- end page -->

<!-- start footer --><div id="footer"><p class="legal"></p></div><!-- end footer -->

</body>
</html>

タペストリーコンポーネントタグに問題を切り分けた後に追加されました

以下のCSSに組み込まれているタペストリーを見つけてください。ここのどこかに、背景画像でスクロールを使用するボディの機能を壊している線があるはずです。

/* Tapestry styles all start with "t-" */
DIV.t-error {
border: 1px solid red;
padding: 0px;
margin: 4px 0px;
}

DIV.t-error DIV {
padding: 2px;
display: block;
margin: 0px;
background-color: red;
color: white;
font-weight: bold;
}

DIV.t-error UL {
margin: 2px 0px;
background-color: white;
color: red;
}

DIV.t-error LI {
margin-left: 20px;
}

HTML>BODY DIV.t-error LI {
margin-left: -20px;
}

.t-invisible {
display: none;
}

LABEL.t-error {
color: red;
}

INPUT.t-error, TEXTAREA.t-error {
border-color: red;
font-style: italic;
color: red;
}

IMG.t-error-icon {
margin-left: 4px;
width: 16px;
height: 16px;
background: url(field-error-marker.gif);
}

IMG.t-autoloader-icon {
margin-left: 4px;
width: 16px;
height: 16px;
background: url(ajax-loader.gif);
}

IMG.t-sort-icon {
margin-left: 4px;
}

DIV.t-exception-message {
font-style: italic;
font-size: 12pt;
border: thin dotted silver;
margin: 5px 0px;
padding: 3px;
}

DIV.t-exception-report, DIV.t-env-data {
font-family: "Trebuchet MS", Arial, sans-serif;
}

DIV.t-exception-report LI {
margin-left: -40px;
}

DIV.t-exception-report DT, DIV.t-env-data DT {
color: green;
padding-left: 2px;
background-color: #FFFFCF;
}

DIV.t-exception-report LI {
list-style: none;
}

SPAN.t-exception-class-name {
display: block;
margin-top: 15px;
font-size: 12pt;
background-color: #E1E1E1;
color: blue;
padding: 2px 3px;
font-weight: bold;
}

SPAN.t-exception-stack-controls {
display: block;
float: right;
}

UL.t-stack-trace LI {
font-family: Monaco, Times, monospace;
font-size: 10pt;
margin-left: -25px;
list-style: square;
}

LI.t-usercode-frame {
font-weight: bold;
color: blue;
}

LI.t-omitted-frame {
display: none;
color: gray;
list-style: square;
}

H1.t-exception-report {
font-family: "Trebuchet MS", Arial, sans-serif;
color: red;
}

DIV.t-exception-report DT:after {
content: ":";
}

DIV.t-exception-report DD, DIV.t-env-data DD {
margin-left: 10px;
}

TABLE.t-data-table {
border-collapse: collapse;
margin: 0px;
padding: 2px;
}

TABLE.t-data-table TH {
background-color: black;
color: white;
}

TABLE.t-data-table TD {
border: 1px solid silver;
margin: 0px;
}

DIV.t-beaneditor {
display: block;
background: #ffc;
border: 2px outset brown;
padding: 2px;
font-family: "Trebuchet MS", Arial, sans-serif;
}

DIV.t-beaneditor-row {
padding: 4px 0px 2px 0px;
}

DIV.t-beaneditor-row LABEL:after {
content: ":";
}

DL.t-beandisplay {
display: block;
padding: 2px;
font-family: "Trebuchet MS", Arial, sans-serif;
background: #CCBE99;
border: 2px outset black;
width: auto;
}

DL.t-beandisplay DT {
width: 250px;
display: inline;
float: left;
text-align: right;
clear: left;
padding-right: 3px;
vertical-align: middle;
}

DL.t-beandisplay DT:after {
content: ":";
}

DIV.t-beaneditor-row LABEL {
width: 250px;
display: block;
float: left;
text-align: right;
clear: left;
padding-right: 3px;
vertical-align: middle;
}

INPUT.t-number {
text-align: right;
}

DIV.t-beandisplay DIV.t-beandisplay-label {
padding-right: 5px;
}

TABLE.t-data-grid THEAD TR {
color: white;
background-color: #809FFF;
}

TABLE.t-data-grid THEAD TR TH {
text-align: left;
padding: 3px;
white-space: nowrap;
border-right: 1px solid silver;
border-bottom: 1px solid silver;
}

TABLE.t-data-grid {
border-collapse: collapse;
border-left: 1px solid silver;
}

TABLE.t-data-grid TBODY TR TD {
border-right: 1px solid silver;
border-bottom: 1px solid silver;
padding: 2px;
}

DIV.t-data-grid {
font-family: "Trebuchet MS", Arial, sans-serif;
}

DIV.t-data-grid-pager {
margin: 8px 0px;
}

DIV.t-data-grid-pager A, DIV.t-data-grid-pager SPAN.current {
text-decoration: none;
color: black;
padding: 2px 5px;
font-size: medium;
border: 1px solid silver;
margin-right: 5px;
}

DIV.t-data-grid-pager A:hover {
border: 1px solid black;
}

DIV.t-data-grid-pager SPAN.current {
color: white;
background-color: #809FFF;
}

TABLE.t-data-grid TR TH A {
color: white;
}

IMG {
border: none;
}

DIV.t-env-data-section {
padding-left: 5px;
}

DIV.t-env-data DD, DIV.t-exception-report DD {
margin-left: 25px;
margin-bottom: 10px;
}

DIV.t-env-data LI {
margin-left: -25px;
}

DIV.t-env-data-section {
font-size: 12pt;
background-color: #E1E1E1;
color: blue;
padding: 2px 3px;
font-weight: bold;
}

TABLE.t-location-outer {
padding: 5px;
border-collapse: collapse;
border: 1px solid black;
width: 100%;
}

TD.t-location-line {
width: 40px;
text-align: right;
padding: 0px;
background-color: #E1E1E1;
padding-right: 3px;
border-right: 1px solid black;
}

TD.t-location-content {
border-top: 1px solid silver;
border-right: 1px solid black;
white-space: pre;
}

TD.t-location-current {
background-color: #FFFFCF;
}

TD.t-location-content-first {
border-top: 1px solid black;
}

DIV.t-palette {
display: inline;
}

DIV.t-palette SELECT {
margin-bottom: 2px;
width: 200px;
}

DIV.t-palette-title {
color: white;
background-color: #809FFF;
text-align: center;
font-weight: bold;
margin-bottom: 3px;
display: block;
}

DIV.t-palette-available {
float: left;
}

DIV.t-palette-controls {
margin: 5px 5px;
float: left;
text-align: center;
}

DIV.t-palette-controls BUTTON {
display: block;
margin-bottom: 3px;
}

DIV.t-palette-controls BUTTON[disabled] IMG {
filter: alpha(opacity = 25);
-moz-opacity: .25;
}

DIV.t-palette-selected {
float: left;
clear: right;
}

DIV.t-palette-spacer {
clear: left;
}

IMG.t-calendar-trigger {
padding-left: 3px;
cursor: pointer;
}

DIV.t-autocomplete-menu {
z-index: 9999;
}

DIV.t-autocomplete-menu UL {
border: 2px outset #cc9933;
background-color: #cc9933;
padding: 4px 6px;
overflow: auto;
}

DIV.t-autocomplete-menu LI {
color: white;
list-style-type: none;
padding: 0px;
margin: 0px;
border-bottom: 1px solid black;
cursor: pointer;
}

DIV.t-autocomplete-menu LI.selected {
color: black;
font-weight: bold;
}

DIV.t-error-popup SPAN {
background: transparent url('error-bevel-left.gif') no-repeat;
display: block;
line-height: 28px;
margin-left: 0px;
padding: 0px 5px 10px 22px;
}

HTML>BODY DIV.t-error-popup SPAN {
background: transparent url('error-bevel-left.png') no-repeat;
}

DIV.t-error-popup {
background: transparent url('error-bevel-right.gif') no-repeat scroll top right;
cursor: pointer;
color: #FFF;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 39px;
margin-right: 6px;
padding-right: 29px;
text-decoration: none;
}

HTML>BODY DIV.t-error-popup {
background: transparent url('error-bevel-right.png') no-repeat scroll top right;
}

UL.t-data-list LI {
list-style-type: square;
}

DIV.t-loading {
display: inline;
width: auto;
font-weight: bold;
padding-right: 20px;
background: transparent url(ajax-loader.gif) no-repeat right top;
}

DIV.t-dialog-overlay {
position: fixed;
margin: auto;
top: 0px;
left: 0px;
z-index: 9990;
width: 100%;
height: 100%;
background: transparent url("dialog-background.gif");
}

DIV.t-page-loading-banner {
position: absolute;
top: 5px;
left: 5px;
width: auto;
font-weight: bold;
padding: 2px 4px 2px 24px;
color: black;
background: white url(ajax-loader.gif) no-repeat 4px center;
border-right: 2px solid black;
border-bottom: 2px solid black;
}
4

2 に答える 2

3

これは古いクエリであり、おそらく今では答えがあるでしょうが、いくつかの js がページに含まれていた場合 (意図せずに)、blackbird.js が含まれていた (Tap によって提供されたクライアント側のデバッグ div) たびに、この問題が発生しました。 bg イメージの修正を停止する IE 固有のコードがいくつかあります。この問題を回避するには、ローカルでパッチを適用したバージョンの blackbird.js を使用する必要がありました。コメント行 117 blackbird.js:

bodyTag.style.backgroundAttachment = 'fixed';
于 2010-07-16T19:56:20.280 に答える
0

以下のようにすることで、

body
{
    background: url( yourBG ) repeat-x;
}

問題はありません...背景は意図したとおりにスクロールします。

これが役に立たなかった場合は、行っていることのコード例をさらに追加して、質問を更新してみてください。

コメントの投稿後に追加:
HTML: 

<body>
    <div id="background"></div>

    <div id="yourContent">
    ...
    </div>
</body>

CSS : 

#background
{
 position: relative;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;
 background: url(images/bg_slice.png) repeat;
 z-index: 1;
}
...

私はそのアプローチを複数回使用したので、うまくいくはずだと確信しています。

于 2010-05-26T15:42:17.563 に答える