Question

当我想在我的ASP.NET MVC应用程序中查看页面时，我遇到了一些奇怪的行为。

我已经创建了一个小的HTML帮助器，它应该生成一个特定的布局来显示我的一个类。

它被调用：

<div id="tabs-3" style="display:block; float:left;width:95%;">
    @foreach (Trade trade in ViewBag.Trades)
    { 
        @Html.Trade(trade, userLanguage)
    }
</div>

生成的预期HTML如下所示：

<div id="tabs-3" style="display:block; float:left;width:95%;">
    <div style="display:block; margin-top:0px; margin-left:auto; margin-right:auto; text-align:center;">
        <a href="/en/Trade/Details/1" class="blocklink">
            <div style="display:inline-block; margin-top:0px; margin-left:auto; margin-right:auto; border:2px solid black;">
                <div style="display:inline-block; vertical-align:middle;">
                        <div style="display:inline-block; vertical-align:middle; position:relative; ">
                            <img style='height:50px; width:50px; vertical-align:middle;' alt="User" src="http://localhost:50254/Images/Avatars/01.png">
                        </div>
                    <div style="display:inline-block; vertical-align:middle; position:relative; ">
                        <span style="font-size:16pt; display:block; font-weight:bold;">
                            <a href="/en/Account/Profile/User">User</a>
                        </span>
                        <span style="font-size:8pt; display:block;">
                            <br/>0 Trades (100%)
                        </span>
                    </div>
                </div>
                <div style="display:inline-block; padding-left:50px; padding-right:50px; vertical-align:middle;">
                    <div style="display:inline-block; vertical-align:middle; position:relative; margin-left:auto; margin-right:auto;">
                        <span style="font-size:10pt; display:block; font-weight:bold; text-align:center;">Sat 19 Apr 2014 20:00</span>
                    </div>
                    <div style="display:block; vertical-align:middle; position:relative; margin-left:auto; margin-right:auto; padding-top:5px; padding-bottom:5px; ">
                        <img alt="" src="/Images/Blank.png" style="background: url(/Images/Icons.png) -465px 0; display: block; width: 20px;height: 20px; text-indent: -9999px; margin-left:auto; margin-right:auto;" />
                    </div>
                    <div style="display:block; vertical-align:middle; position:relative; margin-left:auto; margin-right:auto;">
                        <span style="font-size:10pt; display:block; font-weight:bold; text-align:center;">3 Trades</span>
                    </div>
                </div>
                <div style="display:inline-block; vertical-align:middle;">
                    <div style="display:inline-block; vertical-align:middle; position:relative; ">
                        <span style="font-size:16pt; display:block; font-weight:bold; text-align:right;">
                            <a href="/en/Account/Profile/User2">User2</a>
                        </span>
                        <span style="font-size:8pt; display:block; text-align:right;">
                            <br/>0 Trades (100%)
                        </span>
                    </div>
                    <div style="display:inline-block; vertical-align:middle; position:relative; ">
                        <img style='height:50px; width:50px; vertical-align:middle;' alt="User2" src="http://localhost:50254/Images/Avatars/09.png">
                    </div>
                </div>
            </div>
        </a>
    </div>
    <!-- Other records-->
</div>

我已经使用断点来查看生成的字符串，它确实看起来应该如此。当我在浏览器中查看源代码时，它也如上所示。

然而，呈现的HTML与它不同（我已经使用IE 11，FF 28和Chrome 34的调试工具进行了检查），它看起来像这样：

<div id="tabs-3" style="display:block; float:left;width:95%;">
    <div style="display:block; margin-top:0px; margin-left:auto; margin-right:auto; text-align:center;">
        <a href="/en/Trade/Details/1" class="blocklink"></a>
        <div style="display:inline-block; margin-top:0px; margin-left:auto; margin-right:auto; border:2px solid black;">
            <a href="/en/Trade/Details/1" class="blocklink"></a>
            <div style="display:inline-block; vertical-align:middle;">
                <a href="/en/Trade/Details/1" class="blocklink">
                    <div style="display:inline-block; vertical-align:middle; position:relative; ">
                        <img style="height:50px; width:50px; vertical-align:middle;" alt="User" src="http://localhost:50254/Images/Avatars/01.png">
                    </div>
                </a>
                <div style="display:inline-block; vertical-align:middle; position:relative; ">
                    <a href="/en/Trade/Details/1" class="blocklink">
                        <span style="font-size:16pt; display:block; font-weight:bold;"></span>
                    </a>
                    <a href="/en/Account/Profile/User">User</a>
                    <span style="font-size:8pt; display:block;">
                        <br>0 Trades (100%)
                    </span>
                </div>
            </div>
            <div style="display:inline-block; padding-left:50px; padding-right:50px; vertical-align:middle;">
                <div style="display:inline-block; vertical-align:middle; position:relative; margin-left:auto; margin-right:auto;">
                    <span style="font-size:10pt; display:block; font-weight:bold; text-align:center;">Sat 19 Apr 2014 20:00</span>
                </div>
                <div style="display:block; vertical-align:middle; position:relative; margin-left:auto; margin-right:auto; padding-top:5px; padding-bottom:5px; ">
                    <img alt="" src="/Images/Blank.png" style="background: url(/Images/Icons.png) -465px 0; display: block; width: 20px;height: 20px; text-indent: -9999px; margin-left:auto; margin-right:auto;">
                </div>
                <div style="display:block; vertical-align:middle; position:relative; margin-left:auto; margin-right:auto;">
                    <span style="font-size:10pt; display:block; font-weight:bold; text-align:center;">3 Trades</span>
                </div>
            </div>
            <div style="display:inline-block; vertical-align:middle;">
                <div style="display:inline-block; vertical-align:middle; position:relative; ">
                    <span style="font-size:16pt; display:block; font-weight:bold; text-align:right;">
                        <a href="/en/Account/Profile/User2">User2</a>
                    </span>
                    <span style="font-size:8pt; display:block; text-align:right;">
                        <br>0 Trades (100%)
                    </span>
                </div>
                <div style="display:inline-block; vertical-align:middle; position:relative; ">
                    <img style="height:50px; width:50px; vertical-align:middle;" alt="User2" src="http://localhost:50254/Images/Avatars/09.png">
                </div>
            </div>
        </div>
    </div>
    <!--Other records-->
</div>

如果第一眼看不清楚超链接（好HTML的第3行class="blocklink"）没有呈现为div周围的单个标记，而是在内部呈现多次代码要么在<span>标记之间或之间没有任何内容，要么破坏该标记中的内容。

我发现blocklink样式类正在寻找一种在div周围添加链接的方法：

.blockLink  
{  
position:absolute;  
top:0;  
left: 0;  
width:100%;  
height:100%;  
z-index: 1;  
background-color:#ffffff;   
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
filter: alpha(opacity=0);  
opacity:0;  
}

有没有人遇到过这样的问题？我真的不知道为什么呈现的HTML看起来不同。

所有这些都是在VS 2012.4中直接在内置IIS Express上完成的。我无法在外部服务器上试用它，因为该应用程序仍在开发中，尚未分配任何服务器。

Answer 1

那是因为你的html包含嵌套的<a>元素，这些元素不符合标准的HTML。来自W3C spec for <a>：

a元素可以包裹整个段落，列表，表格，等等，甚至整个部分，只要没有互动内容（例如按钮或其他链接）。

您也有关于SO的相关讨论，例如this question。浏览器渲染此方案的方式是discussed here，这解释了为什么您会看到不同的渲染html。

我创建了this fiddle，其中包含简化的html代码，可以重现此问题：

<a class="blockLink" href="#">
    <div class="blockLinkContent">
        <h1>Link with inner link</h1>
        <a class="innerLink" href="#">inner link</a>
    </div>
</a>

渲染的html在Chrome上看起来像这样：

<a class="blockLink" href="#">
</a>
<div class="blockLinkContent"><a class="blockLink" href="#">
    <h1>Link with inner link</h1>
    </a><a class="innerLink" href="#">inner link</a>
</div>

为了解决这个问题，你可以摆脱其中一个链接。然后使用Javascript \ CSS处理click事件并添加您可能需要的任何样式，如活动/悬停状态或文本下划线。

例如，您可以摆脱内部链接，将其替换为span并使用Javascript来处理单击新的内部跨度：

<a class="blockLink" href="#">
    <div class="blockLinkContent">
        <h1>Outer link only</h1>
        <span class="innerLink">inner link</span>
    </div>
</a>

$(function(){
    $(".innerLink").click(function(){ alert("inner clicked"); return false; });
});

您可以在this other fiddler中使用此代码。

希望这有帮助！

呈现的HTML与源不同

1 个答案: