Фоновое изображение исправлено с вертикальной полосой прокрутки в IE, сломанной компонентами Tapestry5/css

** РЕДАКТИРОВАТЬ 17 ноября **

Привет еще раз, я хотел показать некоторый код, который вы можете использовать, чтобы изящно решить эту проблему. Создайте файл blackbird.js с закомментированной строкой, как указано в принятом ответе. Поместите его где-нибудь в каталог вашего веб-приложения (я поместил свой в /scripts/blackbird

//IE bug fix
configuration.add("tapestry.blackbird", "context:/scripts/blackbird_1_0/");
//    configuration.add(SymbolConstants.BLACKBIRD_ENABLED, "false");   Not available until 5.2
0) вместе с другими ресурсами Blackbird (blackbird_icons.png, blackbird_panel.png, blackbird.css, spacer.gif), а затем добавьте это как конфигурацию для 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:

верх страницы

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxmaoooooooooooooooooooooooooo
oooooooooooooooooooooooooooooooooooooooooOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO о.

немного прокрутил вниз

ооооооооооооооооооооооооо
_________________________________________________________
_________________________________________________________
--------------------------------------
--------------------------------------
------ --------------------------------

IE:

верх страницы

xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
oooooooooooooooooooooooooooo
oooooooooooooooooooooooooooo
_________________________________________________________
_________________________________________________________

немного прокрутил вниз

xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
oooooooooooooooooooooooooooo
oooooooooooooooooooooooooooo
_________________________________________________________
_________________________________________________________

Текущий 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 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;
}

css background-image internet-explorer tapestry
person Rich    schedule 26.05.2010    source источник
comment
не могли бы вы привести пример того, что вы имеете в виду? может быть, живая демонстрация или какой-то код? ваше здоровье   -  person Ryano    schedule 26.05.2010

Ответы (2)


arrow_upward
3
arrow_downward

Это старый запрос, и у вас, вероятно, уже есть ответ, но у меня была эта проблема всякий раз, когда какой-либо js был включен на страницу (даже непреднамеренно), был включен blackbird.js (клиентский отладочный div, предоставленный Tap) - это имеет определенный код для IE, который останавливает исправление изображения bg - мне пришлось использовать мою собственную локальную исправленную версию blackbird.js, чтобы обойти эту проблему. Комментарий к строке 117 blackbird.js:

bodyTag.style.backgroundAttachment = 'fixed';
person Jim    schedule 16.07.2010
comment
Вау, спасибо, это именно проблема. Теперь я больше не чувствую себя каким-то сумасшедшим неумелым CSS. Теперь, чтобы выяснить, как на самом деле справиться с этим изящно, не управляя моей собственной версией банки с сердцевиной гобелена... - person Rich; 20.07.2010
comment
Спасибо за такое хорошее описание. У нас была именно эта проблема. - person arxpoetica; 29.09.2010

arrow_upward
0
arrow_downward

Делая следующее,

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

Я использовал этот подход более одного раза, поэтому я уверен, что он ДОЛЖЕН работать.

person Zwik    schedule 26.05.2010
comment
ХОРОШО. Я просмотрел код, который вы опубликовали, и вот возможное решение, которое я использовал однажды: создайте дочерний элемент div тела, у которого нет детей. Сделайте его 100% от размера вашего тела и используйте его для фона. Я опубликую пример кода в своем ответе - person Zwik; 26.05.2010
comment
Я добавил ‹div id=bground›‹/div› и соответствующий CSS, который вы разместили, но теперь он даже не отображает фоновое изображение в Firefox или IE. тело { поле: 0; заполнение: 0; шрифт: 15px Arial, Helvetica, без засечек; выравнивание текста: по ширине; } #bground { background: url(images/myimg.jpg) repeat-x; ширина: 100%; высота: 100%; } - person Rich; 26.05.2010
comment
Я нашел точный код, о котором говорил, я обновлю свой ответ, чтобы отразить небольшую разницу. Основное отличие заключается в позиции: относительной. Этот код совместим с IE8, но не гарантируется с IE7. - person Zwik; 26.05.2010
comment
Хм, это все еще не работает для меня. Я верю вам на слово, что это должно сработать, я начинаю видеть закономерность в проблеме, которую вижу. Мое веб-приложение построено в Tapestry, и кажется, что любая страница, на которой есть некоторые компоненты гобелена, отображает эту проблему с прокруткой. Однако страницы с чистыми html-тегами не демонстрируют такого поведения. Так что это похоже на проблему Tapestry и может быть укоренена в CSS Tapestry по умолчанию. Я собираюсь обновить это с помощью гобелена css, включенного в мой пост, так как проблема несколько изменилась. - person Rich; 27.05.2010