我的 WebMatrix 站点的跨度元素未隐藏在 Internet Explorer 中答案

【问题标题】：My WebMatrix site has span elements not rendering hidden in Internet Explorer我的 WebMatrix 站点的跨度元素未隐藏在 Internet Explorer 中
【发布时间】：2012-10-25 14:36:00
【问题描述】：

我的页面中有以下 html 块（带剃刀）：

<td class="upperTable">
                            <div id="picLeftButton" class="pictureButton" unselectable="on" style="margin-right: 5px;">&lArr;</div><div id="picRightButton" unselectable="on" class="pictureButton" style="margin-left: 5px;">&rArr;</div>
                            <span id="picm" class="mugshot"><span class="fileNameDisplay"><span style="color: #808080; font-size: 1.1em;">Pic Currently Stored:&nbsp;&nbsp;</span>@if((string)Session["gMugshotFileName"]==null || (string)Session["gMugshotFileName"]==""){<span class="noFile">[NONE]</span>}else{@Session["gMugshotFileName"]}</span>Mugshot:
                                <input id="mugUp" name="mugUp" type="file" maxlength="50" /><button onclick="mugshotClearPicVE()" id="MugshotClearPic" type="button">Clear Pic</button><input id="mugIsPicClear" name="mugIsPicClear" type="hidden" value="" />
                                @if(Session["gMugshot"]!=null)
                                {
                                    <img id="Mugshot" class="picDisplay" style="width: 400px; height: 350px;" alt="Mugshot" src="/ShowImage.cshtml?Id=@Session["gEntryID"]" />
                                }
                                else
                                {
                                    <img id="MugshotNoPic" class="picDisplay" style="width: 400px; height: 350px;" alt="No Picture Loaded" src="/Images/noPicture.png" />
                                }
                                </span>
                            <span id="pic1" class="mugshot" hidden="hidden"><span class="fileNameDisplay"><span style="color: #808080; font-size: 1.1em;">Pic Currently Stored:&nbsp;&nbsp;</span>@if((string)Session["gPOIPic1FileName"]==null || (string)Session["gPOIPic1FileName"]==""){<span class="noFile">[NONE]</span>}else{@Session["gPOIPic1FileName"]}</span>Picture 1:
                                <input id="picUp1" name="picUp1" type="file" maxlength="50" accept="image/*" /><button onclick="POIPic1ClearPicVE()" id="POIPic1ClearPic" type="button">Clear Pic</button><input id="POIPic1IsPicClear" name="POIPic1IsPicClear" type="hidden" value="" />
                                @if(Session["gPOIPic1"]!=null)
                                {
                                    <img id="POIPic1" class="picDisplay" style="width: 400px; height: 350px;" alt="POIPic1" src="/ShowImage2.cshtml?Id=@Session["gEntryID"]" />
                                }
                                else
                                {
                                    <img id="POIPic1NoPic" class="picDisplay" style="width: 400px; height: 350px;" alt="No Picture Loaded" src="/Images/noPicture.png" />
                                }
                                </span>
                            <span id="pic2" class="mugshot" hidden="hidden"><span class="fileNameDisplay"><span style="color: #808080; font-size: 1.1em;">Pic Currently Stored:&nbsp;&nbsp;</span>@if((string)Session["gPOIPic2FileName"]==null || (string)Session["gPOIPic2FileName"]==""){<span class="noFile">[NONE]</span>}else{@Session["gPOIPic2FileName"]}</span>Picture 2:
                                <input id="picUp2" name="picUp2" type="file" maxlength="50" accept="image/*" /><button onclick="POIPic2ClearPicVE()" id="POIPic2ClearPic" type="button">Clear Pic</button><input id="POIPic2IsPicClear" name="POIPic2IsPicClear" type="hidden" value="" />
                                @if(Session["gPOIPic2"]!=null)
                                {
                                    <img id="POIPic2" class="picDisplay" style="width: 400px; height: 350px;" alt="POIPic2" src="/ShowImage3.cshtml?Id=@Session["gEntryID"]" />
                                }
                                else
                                {
                                    <img id="POIPic2NoPic" class="picDisplay" style="width: 400px; height: 350px;" alt="No Picture Loaded" src="/Images/noPicture.png" />
                                }
                                </span>
                            <span id="pic3" class="mugshot" hidden="hidden"><span class="fileNameDisplay"><span style="color: #808080; font-size: 1.1em;">Pic Currently Stored:&nbsp;&nbsp;</span>@if((string)Session["gPOIPic3FileName"]==null || (string)Session["gPOIPic3FileName"]==""){<span class="noFile">[NONE]</span>}else{@Session["gPOIPic3FileName"]}</span>Picture 3:
                                <input id="picUp3" name="picUp3" type="file" maxlength="50" accept="image/*" /><button onclick="POIPic3ClearPicVE()" id="POIPic3ClearPic" type="button">Clear Pic</button><input id="POIPic3IsPicClear" name="POIPic3IsPicClear" type="hidden" value="" />
                                @if(Session["gPOIPic3"]!=null)
                                {
                                    <img id="POIPic3" class="picDisplay" style="width: 400px; height: 350px;" alt="POIPic3" src="/ShowImage4.cshtml?Id=@Session["gEntryID"]" />
                                }
                                else
                                {
                                    <img id="POIPic3NoPic" class="picDisplay" style="width: 400px; height: 350px;" alt="No Picture Loaded" src="/Images/noPicture.png" />
                                }
                            </span></br>

您会注意到有四个跨度，这里的想法是使用手动（从 div）创建的按钮“翻页”通过它们，实际上使用 jQuery 隐藏/取消隐藏它们（不要问我为什么没有'不只是使用“按钮”元素，但这无关紧要）。我在这里遇到的问题是世界上最糟糕的浏览器（总是一致的IE）不会隐藏最后三个跨度，事实上，它甚至不会开始隐藏，也就是说，所有四个“页面”都是随意显示的在页面上，我一次只为一个分配空间。（想法是有四个“页面”，第一个不开始隐藏，其他三个开始隐藏）。无论如何，无论我使用 hidden="hidden"，尝试在页面加载时在 jQuery 中将 span 属性呈现为隐藏 ($(".mugshot").attr('hidden' true))，或者我是否使用“display : none" IE 无法像往常一样解释这些解决方案中的任何一个，这让我很头疼。

这是因为它在一张桌子上吗？如果是这样，我可以通过什么其他方式选择这些元素以用于所有浏览器？

【问题讨论】：

标签： c# jquery html hidden webmatrix

【解决方案1】：

好的，为了解决这个问题，我必须添加一些东西。首先，我必须将 style="display: none" 添加到我想要开始隐藏页面的三个元素中，在 html 级别。然后我不得不在 jQuery 中添加一些行。

修改前：

                $("#picm").prop("hidden", true);
                $("#pic1").prop("hidden", false);
                $("#pic2").prop("hidden", true);
                $("#pic3").prop("hidden", true);

修改后：

                $("#picm").prop("hidden", true);
                $("#pic1").prop("hidden", false);
                $("#pic2").prop("hidden", true);
                $("#pic3").prop("hidden", true);
                $("#picm").css("display", "none");
                $("#pic1").css("display", "inline");
                $("#pic1").css("display", "normal");
                $("#pic2").css("display", "none");
                $("#pic3").css("display", "none");

请注意，我不仅必须重复三行以使用 css 显示隐藏在 IE 中，而且还必须为 IE 添加第四行 (.css('display', 'inline')) 和第五行 ( .css('display', 'normal')) 用于 FireFox。

如果所有浏览器都可以像 Chrome 一样智能...但是我会接受没有浏览器像 IE 一样愚蠢...

【讨论】：