修复了 IE 中垂直滚动条的背景图像，被 Tapestry5 组件/css 破坏

发布于 2024-09-03 12:43:52 字数 12077 浏览 5 评论 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

** 结束编辑 **

我的网络应用程序中有一个渐变背景图像，它从顶部的深色到底部的浅色。在 Firefox 中，该图像得到了正确处理，在页面上垂直向下滚动时，黑色顶部部分消失。

然而，当我开始在 IE 中测试（我使用的是 IE8）时，当您垂直滚动时，背景图像在屏幕后面保持固定，这意味着背景图像的深色顶部部分始终呈现在 IE 视图的顶部。

我已经将背景标签设置为已定义滚动，据我所知，这应该可以解决问题，但 IE 不高兴。

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

我确保在添加滚动之前清除 IE 中的数据，以防它缓存旧样式。

问题的文本表示（x = 最暗，o = 暗，_ = 亮，- = 最亮） Firefox：

页面顶部

xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
呜呜呜呜呜呜
呜呜呜呜呜呜
_________________________________________________
________________________________________________

向下滚动一点

oooooooooooooooooooooo
_________________________________________________
_________________________________________________
--------------------------------------------------
--------------------------------------------------
--------------------------------------

IE：

页面顶部

xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
呜呜呜呜呜呜
呜呜呜呜呜呜
_________________________________________________
_________________________________________________

向下滚动一点

xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
呜呜呜呜呜呜
呜呜呜呜呜呜
_________________________________________________
__________________________________________________

当前 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>

在隔离问题后添加到 Tapestry 组件标签

找到下面用 CSS 构建的 Tapestry，这里的某处一定有一行破坏了主体在背景图像上使用滚动的能力？

/* 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;
}

原文

** EDIT November 17th **

Hi again, I wanted to show some code you can use to gracefully solve this issue. Make a blackbird.js file with the line commented out as mentioned in the accepted answer. Place it somewhere in your webapp directory (I put mine in /scripts/blackbird_1_0) along with the other Blackbird resources (blackbird_icons.png, blackbird_panel.png,blackbird.css, spacer.gif) and then add this as the configuration for blackbird as below. If you happen to use 5.2 and beyond, you might want to consider just disabling Blackbird altogether, I personally would love to do this but am stuck on 5.1 due to company restraints.

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

** END Edit **

I have a gradient background image in my web application, it goes from dark at the top to light at the bottom. In Firefox, this image is handled properly, where upon scrolling vertically downwards on the page, the dark top section disappears.

However, when I started testing in IE (I'm using IE8) the background image stays fixed behind the screen as you vertically scroll, meaning the dark top section of the background image is always rendered at the top of the IE view.

I've set the background tag to have scroll defined, which from all I can tell should solve the problem, but IE is not happy.

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

I made sure to be clearing the data in IE in case it was caching the old style before I added scroll.

Textual representation of issue (x = darkest, o = dark, _ = light, - = lightest)
Firefox:

top of page

xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
oooooooooooooooooooooooo
oooooooooooooooooooooooo
__________________________________________________
__________________________________________________

scrolled down a bit

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

IE:

top of page

scrolled down a bit

Current CSS:

body {

margin: 0;

padding: 0;

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

text-align: justify;

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

}

Source of a page with the issue:

<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>

Added after isolating issue to Tapestry component tags

Find the Tapestry built in CSS below, somewhere in here there must be a line that is breaking the ability of body to use scroll on the background image?

/* 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;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

迷荒 2024-09-10 12:43:52

这是一个旧的查询，你现在可能已经有了答案，但是每当页面中包含一些 js （甚至是无意的）时，我都会遇到这个问题，blackbird.js 被包含（Tap 提供的客户端调试 div） - 它有一些特定于 IE 的代码会阻止背景图像被修复 - 我必须使用我自己的本地修补版本的 blackbird.js 来解决这个问题。评论第 117 行 blackbird.js：

bodyTag.style.backgroundAttachment = 'fixed';

This is an old query and you probably have an answer by now but I had this problem whenever some js was included in a page (even unintentionally), blackbird.js was being included (the client-side debug div provided by Tap) - it has some IE specific code that stops the bg image being fixed - I had to use my own local patched version of blackbird.js to get around the issue. Comment Line 117 blackbird.js:

bodyTag.style.backgroundAttachment = 'fixed';

回复收藏 0 原文

绮筵 2024-09-10 12:43:52

通过执行以下操作，

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;
}
...

我已经不止一次地使用过这种方法，所以我确信它应该有效。

By doing the following,

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

you should not have any problem... Your background will scroll as intended.

If this wasn't helpful, try updating your question by adding some more code example of what you're doing.

ADDED AFTER POSTING COMMENTS :
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;
}
...

I've used that approach more than once, so I am positive it SHOULD work.

回复收藏 0 原文

~没有更多了~