用IE8搞怪CSS，有什么建议吗？
为什么IE必须如此困难？
在ASP.NET MVC平台上构建站点。电子邮件页面在表单周围有一个边框（由div设置）。 IE弄得一团糟。
在IE8中呈现的页面的屏幕截图：
在Firefox 3.6中呈现的页面的屏幕截图：
Chrome 8中呈现的页面的屏幕截图：
我想我已经缩小了问题范围，这里是电子邮件页面的代码（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
因此，IE假设我希望容器CallBackForm中的每个div都应用相同的样式。
有什么建议吗？
编辑：
它是由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; 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;"> </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 & 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工具的图像合成：
2 个答案:
答案 0 :(得分：3)
一定是这个
<% using (Html.BeginForm("CallBack","Home", FormMethod.Post, new {@id="CallBack"})) {%>
您正在此处创建并呈现另一个名为CallBackForm的表单（除了您在<div>处已有的<div id="CallBackForm">）。请检查一下。
答案 1 :(得分：0)
您可以使用Fieldset标记而不是使用div标签来提供边框吗？您可以根据需要设置fieldset边框的样式，并且Fieldset标记可以在此处创建更多“语义”senese，并且它与任何其他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*/
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？