<img> в <span>не работает с IE, но хорошо работает в Chrome и Mozilla

Question

В моем приложении JSF используется следующий код

<t:dataList id="slider-one" value="#{MyBean.banners}" var="ofr" layout="simple" first="0" rows="10" dir="LTR">
<img src="demo/4.jpg" alt="picture" />
</t:dataList>

, который генерирует следующий код при выполнении:

<span id="slider-one" style="display:inline">
<img src="demo/4.jpg" alt="picture" />                                            
<img src="demo/4.jpg" alt="picture" />
</span>

Я использую JQuery для перемещения этих изображений, что хорошо работает в Chrome& Mozilla, но не работает в IE.У кого-нибудь есть предложения по этому поводу?

Answer 1

Когда вы используете <t:dataList layout="simple"> с любым атрибутом, для которого требуется для передачи в HTML, например id="slider-one", он будет отображать содержащий <span> элемент с этим атрибутом.

Как ответил РобБ, вы скорее хотите использовать вместо этого содержащий элемент блока, например <ul>, с каждым изображением внутри <li>. Чтобы добиться этого с Tomahawk's <t:dataList>, вам нужно установить для атрибута layout значение unorderedList следующим образом:

<t:dataList id="slider-one" value="#{MyBean.banners}" var="ofr" layout="unorderedList" first="0" rows="10" dir="LTR">
    <h:graphicImage value="#{ofr}" alt="picture" />
</t:dataList>

(заметьте, это было за меня, почему вы использовали <img> с фиксированным src, он показывал бы только те же изображения, если бы вы не использовали <h:graphicImage> со ссылкой #{ofr} который я предполагаю представляет URL изображения?)

Это сгенерирует HTML следующим образом:

<ul id="slider-one">
    <li><img src="demo/1.jpg" alt="picture" /></li>
    <li><img src="demo/2.jpg" alt="picture" /></li>
    <li><img src="demo/3.jpg" alt="picture" /></li>
    ...
</ul>

Большинство, если не все, плагины / примеры слайдера jQuery также основаны на списке изображений, помеченном <ul><li>.

Answer 2

Если я правильно понимаю вашу проблему, вы пытаетесь создать какую-то форму слайдера изображений.В этом случае вы должны использовать ul и перечислять каждое отдельное изображение как элемент li, так как span не следует использовать для размещения нескольких элементов, как вы пытаетесь это сделать.Затем оберните div вокруг ul, который имеет overflow: hidden; с определенной шириной, установленной для показа только одного из ваших изображений за раз.div будет действовать как окно для просмотра изображений внутри.Затем вы сдвинете ul в пределах div влево или вправо в соответствии с вашим желаемым направлением.

Если я неправильно понял вашу проблему, тогда мои извинения.