Причуда CSS с IE8, есть предложения? - PullRequest
Новая
       2

Причуда CSS с IE8, есть предложения?

1 голос
/ 25 января 2011

Почему IE должен быть таким сложным?

Создание сайта на платформе ASP.NET MVC.Страница электронной почты имеет рамку вокруг формы (устанавливается div).IE делает беспорядок.

Снимок экрана страницы, отображаемой в IE8: Internet Exploder

Снимок экрана страницы, отображаемой в Firefox 3.6: Firefox

Снимок экрана отображаемой страницыв Chrome 8: Chrome

Я думаю, что я сузил проблему, вот код страницы электронной почты (css 'hack' была моей неудачной попыткой скрыть это): 

#CallBackForm
{
    margin-top:65px;
    padding:10px 10px 15px 10px;
    background-color:#eef7ff;
    border:1px solid #ccc;
    height:260px;
    overflow:hidden;
}
/** html .centerform
{
    background-color:white!important;
    border:1px solid white!important;
    display:none;
    visibility:hidden;
    height:0;
}*/
.centerform
{
    margin-left:auto;
    margin-right:auto;
    width:360px;
}

<div id="CallBackForm">
    <div class="centerform">
    <p>Please fill out the following form and Perri Building will contact you shortly!</p>
    <% using (Html.BeginForm("CallBack","Home", FormMethod.Post, new {@id="CallBack"})) {%>
        <%= Html.ValidationSummary(true) %>
            <div class="grid_3">
                <%= Html.LabelFor(model => model.FName) %>
            </div>
            <div class="grid_6">
                <%= Html.TextBoxFor(model => model.FName) %><%= Html.ValidationMessageFor(model => model.FName) %>
            </div>
            <div class="clear"></div>
            <div class="grid_3">
                <%= Html.LabelFor(model => model.LName)%>
            </div>
            <div class="grid_6">
                <%= Html.TextBoxFor(model => model.LName)%><%= Html.ValidationMessageFor(model => model.LName)%>
            </div>
            <div class="clear"></div>
            <div class="grid_3">
                <%= Html.LabelFor(model => model.Phone)%>
            </div>
            <div class="grid_6">
                <%= Html.TextBoxFor(model => model.Phone)%><%= Html.ValidationMessageFor(model => model.Phone)%>
            </div>
            <div class="clear"></div>
            <div class="grid_9">
                <%= Html.GenerateCaptcha() %>
            </div>
            <div class="grid_8" style="text-align:right;"><input type="submit" value="Send" /></div>
    <% } %>
    </div>
</div>

Я узнал, что если бы я поместил здесь текст в коде, я бы получил следующие результаты: 

<div id="CallBackForm">
    <div class="centerform">
    <% using (Html.BeginForm()) { %>
       //.....
    <% } %>
    test1
    </div>
    test2
</div>
test3

Debug

Так что для некоторыхПричина, по которой IE предполагает, что я хочу, чтобы к каждому div внутри контейнера CallBackForm применялся одинаковый стиль.

Есть предложения?

EDIT:

Это что-то сФорма, сгенерированная MVC.Я закомментировал содержимое формы, двойное поле в IE все еще.Закомментирование всей формы (между тегами <% %>) приводит к появлению одного окна во всех браузерах.Продолжим эксперименты.

CSS: 

@import 'reset.css';
@import 'text.css';
@import '960_24_col.css';

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
    color: #ff0000;
}

.field-validation-valid
{
    display: none;
}

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid
{
    display: none;
}

/* Styles for recaptcha
-----------------------------------------------------------*/

.recaptchatable .recaptcha_image_cell, #recaptcha_table {
   background-color:transparent !important; /*reCaptcha widget background color*/
 }

 #recaptcha_table {
   border-color: transparent !important; /*reCaptcha widget border color*/
 }

 #recaptcha_response_field {
   border-color: #abadb3 !important; /*Text input field border color*/
   background-color: white !important; /*Text input field background color*/
}

#recaptcha_logo , #recaptcha_tagline
{
    display:none !important;
}

/* Styles for front page layout
-----------------------------------------------------------*/

#top_border
{
    height:1px;
    margin-bottom:2px;
    border-bottom:1px solid #42699d;
}
#bottom_border
{
    height:1px;
    margin: 2px 0px 2px 0px;
    border-bottom:1px solid #42699d;
}
#layout_main 
{
    margin-top:15px;
}
#top_nav
{
    display:block;
    height:54px;
}
#side_ads 
{
    margin-left:-10px;
}
#side_ads .first
{
    margin-top:3px;
    margin-bottom:2px;
}
#side_ads .second 
{
    margin-top:10px;
    margin-bottom:10px;
}
#side_ads .third
{
    margin-top:2px;
}
#testimonials 
{
    margin-left:5px;
    background-image: url("images/page_curl.png");
    background-repeat: no-repeat;
    display:block;
    height:338px;
}
#testimonials .content
{
    margin-left:20px;
    margin-top:30px;
    width:225px;
}
#testimonials h2
{
   font-weight:bold;
   font-size:14px;
}
#testimonials p.body
{
    display:block;
    height:175px;
}
#testimonials p.by
{
    font-style:italic;
    text-align:right;
    width:200px;
}
#testimonials .buttons 
{
    margin-top:110px;
}
#bottom_links
{
    margin-top:10px;
    text-align:center;
}
#bottom_links p
{
    margin:0px;
    color:#9a081b;
}
#bottom_links a
{
    color:#42699d;
    text-decoration:none;
}
#bottom_links a:hover
{
    border-bottom:1px solid #42699d;
}

/* Styles Product Pages
-----------------------------------------------------------*/

#side_img 
{
    margin-left:-10px;
    margin-top:3px;
}
#product_content
{
    padding:0px 5px 5px 5px;
    display:block;
    width:639px;
    height:185px;
    background-color:#dcd2c3;
    border:1px solid black;
}
#product_content h2
{
    margin-bottom:0px;  
    font-weight:bold;
    color:#970016;
    font-size:24px;
}
#product_content p
{
    text-align:justify;
    margin-top:0px;
    width: 515px;
    font-size:12px;
}
#product_content #content_image 
{
    position:relative;
    top:58px;
    float:right;
    display:block;
    width:112px;
    height:92px;
}

/* Styles Mailing Pages
-----------------------------------------------------------*/

#mail_ads
{

}
#mail_ads .first
{
    margin-top:3px;
    margin-bottom:2px;
}
#mail_ads .second 
{
    margin-top:10px;
    margin-bottom:10px;
}
#mail_ads .third
{
    margin-top:2px;
}
/*#mail_content 
{
    display:block;

}*/

#CallBackForm
{
    margin-top:65px;
    padding:10px 10px 15px 10px;
    background-color:#eef7ff;
    border:1px solid #ccc;
    height:260px;
    overflow:hidden;
}
.centerform
{
    margin-left:auto;
    margin-right:auto;
    width:360px;
}

Источник HTML (в соответствии с IE): 

<!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>


    Request a Callback


</title>
    <link href="/Content/Site.css" type="text/css" rel="Stylesheet" />



</head>
<body>
    <form name="aspnetForm" method="post" action="CallBack" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEwNTM3NTY3MTNkZIccQzHp+0a2l4J4rJdeDfOAYoCO" />
</div>

    <div class="container_24" id="layout_main">
        <div class="grid_10" id="logo">
            <a href="/"><img alt="Perri Building &amp;amp; Renovations" src="/Content/images/logo.png" /></a>
        </div>
        <div class="grid_14" id="top_nav">
            Navigation stuff goes here
        </div>
        <div class="clear">
        </div>
        <div class="grid_24" id="top_border"></div>

    <div class="grid_7" id="mail_ads">
        <a href="/Product/Windows"><img alt="Perri Windows" class="first" src="/Content/images/windows_ad.jpg" /></a>
        <a href="/Product/Siding"><img alt="Perri Siding" class="second" src="/Content/images/siding_ad.jpg" /></a>
        <a href="/Product/Roofing"><img alt="Perri Roofing" class="third" src="/Content/images/roofing_ad.jpg" /></a>
    </div>
    <div class="grid_12" id="mail_content">

    <div id="CallBackForm">
        <div class="centerform">
        <p>Please fill out the following form and Perri Building will contact you shortly!</p>
        <form action="/Home/CallBack" method="post">
                <div class="grid_3">
                    <label for="FName">First Name:</label>
                </div>
                <div class="grid_6">
                    <input id="FName" name="FName" type="text" value="" />
                </div>
                <div class="clear"></div>
                <div class="grid_3">
                    <label for="LName">Last Name:</label>
                </div>
                <div class="grid_6">
                    <input id="LName" name="LName" type="text" value="" />
                </div>
                <div class="clear"></div>
                <div class="grid_3">
                    <label for="Phone">Phone Number:</label>
                </div>
                <div class="grid_6">
                    <input id="Phone" name="Phone" type="text" value="" />
                </div>
                <div class="clear"></div>
                <div class="grid_9">
                    <script type="text/javascript"> 
        var RecaptchaOptions = {
            theme : 'clean',
            tabindex : 0
        };

</script><script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6Lc608ASAAAAAPi_2PD2wK1P_o3r2daH0j1B26Eu"> 

</script><noscript>
        <iframe src="http://www.google.com/recaptcha/api/noscript?k=6Lc608ASAAAAAPi_2PD2wK1P_o3r2daH0j1B26Eu" width="500" height="300" frameborder="0">

        </iframe><br /><textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea><input name="recaptcha_response_field" value="manual_challenge" type="hidden" />
</noscript>
                </div>
                <div class="grid_8" style="text-align:right;"><input type="submit" value="Send" /></div>
        </form>
        </div>
    </div>

    </div>


<div class="grid_24" id="bottom_border">
</div>
<div class="grid_8">
    <a href="/Product/Windows"><img alt="Perri Windows" src="/Content/images/windows.jpg" /></a>
</div>
<div class="grid_8">
    <a href="/Product/Roofing"><img alt="Perri Roofing" src="/Content/images/roofing.jpg" /></a>
</div>
<div class="grid_8">
    <a href="/Product/Siding"><img alt="Perri Siding" src="/Content/images/siding.jpg" /></a>
</div>
<div class="clear" style="margin: 5px 0px 5px 0px;">&nbsp;</div>
<div class="grid_8">
    <a href="/"><img alt="Perri Insulation" src="/Content/images/insulation.jpg" /></a>
</div>
<div class="grid_8">
    <a href="/"><img alt="Perri Gutters" src="/Content/images/gutters.jpg" /></a>
</div>
<div class="grid_8">
    <a href="/"><img alt="Perri Patio Doors" src="/Content/images/patio.jpg" /></a>
</div>
<div class="clear">
</div>

        <div class="grid_14 push_5" id="bottom_links">
            <p><a href="/Product/Windows">Windows</a> | <a href="/Product/Roofing">Roofing</a> | <a href="/Product/Siding">Siding</a> | <a href="#">Insulation</a> | <a href="#">Gutters &amp; Gutter Protection</a> | <a href="#">Patio Doors</a></p>
            <p><a href="#">Kitchens</a> | <a href="#">Bathrooms</a> | <a href="#">Additions</a> | <a href="#">Decks</a> | <a href="#">Doors</a></p>
        </div>
    </div>
    </form>
</body>
</html>

Компоновка изображений из инструментов IE Dev:

Debug2

Ответы [ 2 ]

3 голосов
/ 25 января 2011

Должно быть, это 

<% using (Html.BeginForm("CallBack","Home", FormMethod.Post, new {@id="CallBack"})) {%>

Здесь вы создаете и визуализируете другую форму с именем CallBackForm (кроме <div>, который у вас уже есть на <div id="CallBackForm">). Пожалуйста, проверьте это.

0 голосов
/ 25 января 2011

Вместо использования тега div для предоставления границы вы можете использовать тег Fieldset? Вы сможете стилизовать границу поля набора так, как вы хотите, и тег Fieldset сделает здесь более "семантическим" смысл, и он будет отличаться от любых других элементов div.

Что-то вроде: 

<fieldset class="CallBackForm">     
   <div class="centerform">     
       <p>Please fill out the following form and Perri Building will contact you shortly!</p>  
   //Form Stuff  
   </div> 
</fieldset>

И измените свой CSS на: 

fieldset.CallBackForm
{
   /*Your Style*/
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...