HTML — режим совместимости — кнопка не отображается

У меня есть базовая страница, которая используется в iFrame на сайте интрасети. Он генерируется с использованием ASP.NET, сгенерированный источник выглядит следующим образом:

<!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, следует ли мне идти по этому пути, и если да, то какую из этих версий я должен использовать на основе приведенного выше кода? Можно предположить, что будет использоваться только IE

Заранее спасибо,

Нил

РЕДАКТИРОВАТЬ

Основываясь на приведенном ниже ответе, я изменил свою таблицу стилей следующим образом:

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;
}

css internet-explorer ie8-compatibility-mode

Neil 19.09.2011 источник

comment

Вы пытались закрыть содержимое div после кнопки отправки. - Ghatzi 19.09.2011

Ответы (1)

arrow_upward
2
arrow_downward

Кажется, вы применили много ненужных стилей. Проблема, похоже, в

left:-177px;

в #cmdSave.

Однако гораздо больше стилей можно удалить, сохранив тот же макет http://jsfiddle.net/jfsw4. /6/

Затем вы можете форматировать больше с полями и отступами.

Chris 19.09.2011

comment

Согласованный. Использование объявлений position:relative;, left и top кажется необычным способом кодирования CSS. - chris5marsh; 19.09.2011

HTML — режим совместимости — кнопка не отображается

Ответы (1)

Похожие вопросы