Question

我的页面中有以下html（w / razor）块：

<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” ：无“IE无法像往常一样解释任何这些解决方案，让我非常头疼。

这是因为它在桌子里吗？如果是这样，我还可以选择其他哪些方式用于所有浏览器？

Answer 1

好的，为了解决这个问题，我不得不添加一些东西。首先，我必须在html级别上将style =“display：none”添加到我想要隐藏页面的三个元素中。然后我不得不为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'）） FireFox的.css（'display'，'normal'））。

如果只有所有浏览器都可以像Chrome一样聪明......但我会认为没有任何浏览器像IE一样愚蠢......但

我的WebMatrix站点具有未在Internet Explorer中隐藏的跨区元素

1 个答案: