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

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

0 голосов
/ 26 мая 2010

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

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

** END Edit **

У меня есть градиентное фоновое изображение в моем веб-приложении, оно переходит от темного вверху к светлому внизу. В 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>

Добавлено после выделения проблемы в теги компонентов 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;
}

Ответы [ 2 ]

3 голосов
/ 16 июля 2010

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

bodyTag.style.backgroundAttachment = 'fixed';
0 голосов
/ 26 мая 2010

Выполнив следующее, 

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

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

...