Question

I have a repeater that shows a list of albums and each div is wrapped by a <a> tag. Ideally I would be able to click on the image and it would redirect me to the full album.

But what is actually happening that for some reason the <a> tag when spawned by the repeater does not wrap around the divs but instead just appears before the div it should be wrapping. See below...

和我的代码

            <asp:Repeater runat="server" DataSourceID="Sqlds_Albums">
            <ItemTemplate>
                <div class="col-sm-4">
                    <a href="\">
                        <div class="image-card" style="background-image: url('<%# Eval("PhotoID","../Media/Gallery/{0}.jpg") %>')">
                            <div class="card-text-bottom">
                                <div class="album-link">
                                    <asp:HyperLink ID="albumLink" Font-Bold="true" runat="server" Text='<%# Eval("Title") %>' NavigateUrl='<%# Eval("AlbumID","~/Album.aspx?AlbumID={0}") %>' />
                                </div>
                                <div class="album-nophotos">
                                    <asp:Label ID="lbl_NofPhotos" runat="server" Text='<%# Eval("TotalPhotos","{0} Photos") %>'></asp:Label>
                                </div>
                                <div class="album-visits">
                                    <asp:Label ID="lbl_NofVisits" ForeColor="#333333" Font-Size="11px" runat="server" Text='<%# Eval("NofVisit","(Visited {0} times)") %>'></asp:Label>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </ItemTemplate>
        </asp:Repeater>

呈现HTML

<div class="col-sm-4">
<a href="\">
                                                                            </a>
<div class="image-card" style="background-image: url('../Media/Gallery/3568.jpg')"><a href="\">
                        </a>
    <div class="card-text-bottom"><a href="\">
                            </a>
        <div class="album-link"><a href="\">
                                </a><a id="Body_ctl00_albumLink_0" href="Album.aspx?AlbumID=99" style="font-weight:bold;">2017 Photos</a>
        </div>
        <div class="album-nophotos">
            <span id="Body_ctl00_lbl_NofPhotos_0">24 Photos</span>
        </div>
        <div class="album-visits">
            <span id="Body_ctl00_lbl_NofVisits_0" style="color:#333333;font-size:11px;">(Visited 683 times)</span>
        </div>
    </div>
</div>

我尝试了什么

使用了所有的asp：超链接，图像按钮，按钮等，但没有运气。

修改

问题是.album-link div中的超链接。删除它修复了问题，但如下所述，将尝试使用不同的方法来链接div。

Answer 1

简而言之，您正在尝试这样做：

<a><div></div></a>

从技术上讲，该~~无效HTML~~ 仅对HTML5 +有效，而对HTML4无效。在HTML4下，<div>是块级元素，<a>是内联元素，并且在最严格，最符合标准的意义上，内联元素不允许包含块级元素。我知道这很痛苦;我以前也常常这样做。但现代浏览器现在比以前更严格地执行此操作。

由于您正在查看有效图片的相册封面，因此一种选择是使用实际的img元素，而不是在div上设置背景。这个新元素将填充父div的内容。然后，您可以使用css在图像顶部叠加标签，由于img是内联元素，因此您可以将其嵌套在原始<a>元素内。

如果你已经准备好保留一个div，那么我见过的最佳解决方案就是：

Make a div into a link

如果我对W3C有任何影响力，我只是添加了一个新的块级链接元素，或者只是在一些现有的块级元素上允许href属性。

<强>更新

阅读更多内容，您可以通过更改DOCTYPE来解决此问题。问题中的症状与浏览器将其视为HTML4而非HTML5一致。 HTML4仍然具有块/内联区别，但HTML5允许<a>为＆＃34; flow-content＆＃34; （块）或＆＃34;措词内容＆＃34; （排队）。

考虑到这一点，这应该是合法的，只要您的浏览器知道将其解释为HTML5文档，而不是HTML4，您可以通过设置doctype（无论如何应该这样做）来完成。然后浏览器应该停止需要修改HTML以生成兼容的DOM。

<a> tag not repeating correctly in asp:repeater

1 个答案: