내 WebMatrix 사이트는 인터넷 익스플로러에 숨겨진 렌더링되지 않는 범위 요소가

Question

나는 내 페이지 (/ 면도칼 W) 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> 

당신은이 네 개의 스팬이, 그리고 것을 알 수 있습니다 여기에있는 아이디어는 jQuery를 사용하여 수동으로 (div에서) 생성 된 단추를 사용하여 "페이지"를 만드는 것입니다 (실제로 "단추"요소를 사용하지 않은 이유는 묻지 않음). 내가 여기에서 겪고있는 문제는 세계 최악의 브라우저 (항상 만장일치로 IE)가 마지막 3 개의 기간을 숨기지 않는다는 것입니다. 실제로는 숨겨지기 시작하지 않습니다. 즉 네 개의 "페이지"가 ​​모두 우연히 표시됩니다 페이지에서 한 번에 하나씩 만 공간을 할당했습니다. (아이디어는 네 개의 "페이지"가 ​​있으며, 첫 번째 페이지는 숨겨지기 시작하지 않으며 나머지 세 페이지는 시작한다는 것입니다.) 어떤 경우 든 숨김 = "숨김"을 사용하는지 여부에 관계없이 페이지로드시 jQuery에서 span 속성을 숨김 ($ (". mugshot"). attr ('hidden'true))으로 렌더링하거나 "display : none "IE는 이러한 솔루션 중 하나라도 해석하지 못합니다. 항상 그렇듯이 두통을 불러 일으 킵니다.

테이블에 있기 때문에이게 맞습니까? 그렇다면, 다른 모든 방법으로 모든 브라우저에서 사용할 수 있도록 이러한 요소를 선택할 수 있습니까?

Answer 1

좋아,이 문제를 해결하기 위해 몇 가지를 추가해야했습니다. 우선 HTML 레벨에서 숨겨진 페이지를 시작하고 싶었던 세 가지 요소에 style = "display : none"을 추가해야했습니다. 그런 다음 jQuery에 몇 줄을 추가해야했습니다.

전에 수정 : 수정 후

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

: 나는 CSS의 디스플레이를 사용하여 IE에서 숨길 세 줄을 반복했다 할뿐만 아니라했다, 또한 추가했다

   $("#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"); 

공지 사항 IE의 경우 다섯 번째 (.css ('display', 'normal')) FireFox의 경우 넷째 (.css ('display', 'inline'))입니다.

모든 브라우저가 Chrome만큼 똑똑 할 수 있다면 ...하지만 브라우저로는 IE와 같은 바보가되지 않을 것입니다.