HTML - 호환 모드 - 단추가 나타나지 않음

인트라넷 사이트의 iFrame에 사용되는 기본 페이지가 있습니다. 그것은 ASP.NET을 사용하여 생성되며, 생성 된 소스는 다음과 같다 :이와 assoiciated 스타일 시트가HTML - 호환 모드 - 단추가 나타나지 않음

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title> 

</title><link rel="Stylesheet" type="text/css" href="css/EDT.css" /> 
<script type="text/javascript" language="javascript" src="includes/ADIServices.js"></script> 
</head> 
<body> 
<form name="form1" method="post" action="ADIServices.aspx?type=2&amp;typename=contact&amp;id=%7bA2755D17-67FF-4539-8AAE-327038D5E618%7d&amp;orgname=RSAADI&amp;userlcid=1033&amp;orglcid=1033" id="form1"> 
<div> 
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTg3NDY0NDE0Mg8WBh4IdXNlcm5hbWUFEG5rZW5ueUB2dWxjYW4uaWUeCWhhc2FjY2Vzc2ceBWFkaWlkKClYU3lzdGVtLkd1aWQsIG1zY29ybGliLCBWZXJzaW9uPTIuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49Yjc3YTVjNTYxOTM0ZTA4OSRhMjc1NWQxNy02N2ZmLTQ1MzktOGFhZS0zMjcwMzhkNWU2MTgWAgIDD2QWAgIDDw8WAh4EVGV4dAUQbmtlbm55QHZ1bGNhbi5pZWRkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYDBQ9yYlVzZXJBY2Nlc3NZZXMFDnJiVXNlckFjY2Vzc05vBQ5yYlVzZXJBY2Nlc3NOb1LW6lJTh7HRxc/r9DmBabkk6Q+U" /> 
</div> 

<div> 

<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBwKT+7PEDAKl1bK4CQL62KvxCQLU6/3GAwLfl6DKCAK5ieyiCQLHst2vAuS7asmw5PqvB/FNK/KEPjCqeGEz" /> 
</div> 
<div id="content"> 
    <div id="username"> 
     <span id="lblUsername" class="label">Username</span> 
     <input name="txtUsername" type="text" value="[email protected]" id="txtUsername" disabled="disabled" class="textbox" /> 
    </div> 
    <div id="access"> 
     <span id="lblUserAccess" class="label">Portal Access</span> 
     <div id="useraccessradiobuttons"> 
      <span class="radiobutton"><input id="rbUserAccessYes" type="radio" name="rblUserAccess" value="rbUserAccessYes" checked="checked" /><label for="rbUserAccessYes">Yes</label></span> 
      <span class="radiobutton"><input id="rbUserAccessNo" type="radio" name="rblUserAccess" value="rbUserAccessNo" /><label for="rbUserAccessNo">No</label></span> 
     </div> 
    </div> 
    <div id="passwordchange"> 
     <div id="newpassword"> 
      <span id="lblNewPassword" class="label">New Password</span> 
      <input name="txtNewPassword" type="text" id="txtNewPassword" class="textbox" /> 
     </div> 
     <div id="newpasswordrepeat"> 
      <span id="lblRepeatPassword" class="label">Repeat Password</span> 
      <input name="txtRepeatPassword" type="text" id="txtRepeatPassword" class="textbox" /> 
     </div> 
     <a id="lnkShowChangePasswordFields" class="link" OnClick="javascript:ShowHidePasswordFields()">Change Password</a> 
    </div> 

</div> 
<div id="submit"> 
    <input type="submit" name="cmdSave" value="Save" onclick="return ValidateFields();" id="cmdSave" /> 
    <span id="lblStatus"></span> 
</div> 
</form> 
</body> 
</html>

: 일부 사용자가이 페이지를 탐색 할 때

body 
{ 
background-color:#EAF3FF; 
font-family:Tahoma; 
font-size:11px; 
} 

input 
{ 
font-family:Tahoma; 
font-size:11px; 

} 

#content 
{ 
    width:350px; 
} 

.label 
{ 
    width:30%; 
    height:5px; 
    position:relative; 
    top:7px; 
    float:left; 
} 
.radiobutton 
{ 
    width:21%; 
    height:5px; 
    position:relative; 
    top:7px; 
    float:left; 
} 

.link 
{ 
    width:50%; 
    height:5px; 
    position:relative; 
    top:27px; 
    float:left; 
    color:blue; 
    text-decoration:underline; 
} 
.textbox 
{ 
    width:70%; 
    position:relative; 
    float:right; 
} 

#cmdSave 
{ 
    position:relative; 
    float:left; 
    top:50px; 
    left:-177px; 
} 

#lblStatus 
{ 
    position:relative; 
    float:left; 
    left:-170px; 
    top:53px; 
    color:red; 
} 
#useraccessradiobuttons 
{ 
    width:100%; 
    position:relative; 
} 

#newpassword 
{ 
    display:none; 
    position:relative; 
    top:22px; 
} 

#newpasswordrepeat 
{ 
    display:none; 
    position:relative; 
    top:22px; 
}

을 저장 버튼이되지 않는다 나타납니다. 나는이 문제를 처음으로 접했고 호환 모드가 켜져 있음을 발표했습니다.이 기능을 해제하면 문제가 사라졌습니다. 괜찮 았어, 나는 사용자들에게 호환성 모드가 꺼져 있는지 확인하도록 지시했다.

그러나 일부 사용자는 호환 모드가 꺼져 있어도 버튼이 표시되지 않는다고보고하고 있습니다. 사용자는 IE8을 사용하고 있습니다.

브라우저에 IE7/8/9를 에뮬레이트하도록 강제 할 수있는 메타 태그가 있다는 것을 알고 있습니다. 이것이 내가 가야 할 길이며, 그렇다면이 버전 중 위의 코드를 기반으로 사용해야합니까?

body 
{ 
    background-color:#EAF3FF; 
    font-family:Tahoma; 
    font-size:11px; 
    padding-top: 5px; 
    padding-left:5px; 
} 

input 
{ 
    font-family:Tahoma; 
    font-size:11px; 
} 

#useraccessradiobuttons 
{ 
    width:60%; 
    display:inline; 
} 


#content 
{ 
    width:350px; 
    padding-bottom:10px; 
} 

#username  
{ 
    padding-bottom:7px;  
} 
#newpassword 
{ 
    padding-bottom:4px; 
} 

#passwordchange 
{ 
    padding-bottom:7px; 
} 

#access 
{ 
    width:100%; 
    padding-bottom:7px;  
} 

.label 
{ 
    float:left; 
    width:30%; 
} 

.radiobutton 
{ 
    padding-right:30px; 
} 

.link 
{ 
    width:50%; 
    height:5px; 
    color:blue; 
    text-decoration:underline; 
} 
.textbox 
{ 
    width:60%; 
} 
#cmdSave 
{ 
    width:60px; 
} 

#lblStatus 
{ 
    color:red; 
} 
#useraccessradiobuttons 
{ 
    display:inline; 
} 

#newpassword 
{ 
    display:none; 
} 

#newpasswordrepeat 
{ 
    display:none; 
}

: 단지 IE 사전에

감사합니다,

닐

이

편집 내가 내 스타일 시트를 수정 아래의 답변에 따라 다음과

로 사용된다는 것을 가정 할 수있다

출처

2011-09-19 Neil

제출 버튼을 누른 후 콘텐츠 div를 닫으려고 했습니까? – Hatzi

많은 불필요한 스타일이 적용된 것처럼 보입니다. 문제는 #cmdSave에서

left:-177px;

인 것으로 보입니다.

그러나, 당신의 스타일의 더 많은 그런 다음 당신은 마진과 패딩으로 더 많은 포맷 할 수 있습니다 동일한 레이아웃을 http://jsfiddle.net/jfsw4/6/

를 유지하는 반면에 제거 할 수 있습니다.

출처

2011-09-19 10:16:09 Chris

동의 함. 'position : relative;'와'left'와'top' 선언을 사용하는 것은 CSS를 코딩하는 특별한 방법으로 보입니다. – chris5marsh

HTML - 호환 모드 - 단추가 나타나지 않음

답변

관련 문제