<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>元素。

正如 RobB 所回答的那样，您宁愿使用包含块元素，而不是像<ul> <li>中的每个图像一样。要实现这一点 战斧的<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>

(注意，我无法理解为什么您使用带有固定src的<img>，它只会显示所有相同的图像，您不应该使用<h:graphicImage>来引用我认为代表图像 URL 的#{ofr}吗？

这将生成如下所示的 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不应该像您尝试的那样真正用于容纳多个元素。 然后在具有特定宽度设置为一次仅显示一个图像的overflow: hidden;的ul周围环绕一个div。 div将充当查看其中图像的窗口。 然后，您将根据所需的方向将div内的ul向左或向右滑动。

如果我误解了你的问题，那么我很抱歉。