<分区>
我在这里找到了这个网站 http://inauguralseason.com/如果您在 IE 8 中单击“联系我们”，该页面将在 float 框中打开，问题是 float 框占据了整个屏幕，联系表格应该居中……有人知道为什么要这样做吗？
<分区>
我在这里找到了这个网站 http://inauguralseason.com/如果您在 IE 8 中单击“联系我们”，该页面将在 float 框中打开，问题是 float 框占据了整个屏幕，联系表格应该居中……有人知道为什么要这样做吗？
最佳答案
我想你的问题是“为什么联系表不居中”，而不是“为什么 float 框占据了整个屏幕”。
您的 float 框内容是 iframe来源是http://inauguralseason.com/?page_id=12
该表格包含在 div 中与类 contactBackground ;此类在 style.css 中定义文件并有一个 margin: auto应使其居中的属性。
不幸的是，正如你所看到的here ，此方法在 IE8 怪癖模式下不起作用；如 instructions 中所述，floatbox 不支持此模式。 .
解决方案是简单地添加一个 DOCTYPE页面开头的声明。
查看 floatbox iframe 的源代码，我还注意到 <html>和 <body>缺少标签，因此您还应该添加这些标签。
生成的 HTML 代码应如下所示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
body{
background-image: url('http://inauguralseason.com/wp-content/themes/twentyeleven/images/repeating_bq_pink.gif') !important;
}
</style>
<link rel="stylesheet" type="text/css" media="all" href="http://inauguralseason.com/wp-content/themes/twentyeleven/style.css" />
</head>
<body>
<div id="main" style="padding-top:11px;">
<article id="post-12" style="padding:0!mportant; margin:0!important; width:595px; height:600px;" class="post-12 page type-page status-publish hentry">
<header class="entry-header">
<!--<h1 class="entry-title"></h1>-->
</header><!-- .entry-header -->
<div class="contactBackground">
<div class="wpcf7" id="wpcf7-f17-p12-o1">
<form action="/?page_id=12#wpcf7-f17-p12-o1" method="post" class="wpcf7-form">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="17" />
<input type="hidden" name="_wpcf7_version" value="3.2.1" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f17-p12-o1" />
<input type="hidden" name="_wpnonce" value="1050e77acd" />
</div>
<p>
Your Name (required)<br />
<span class="wpcf7-form-control-wrap your-name">
<input type="text" name="your-name" value="" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" />
</span>
</p>
<p>
Your Email (required)<br />
<span class="wpcf7-form-control-wrap your-email">
<input type="text" name="your-email" value="" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" size="40" />
</span>
</p>
<p>
Subject<br />
<span class="wpcf7-form-control-wrap your-subject">
<input type="text" name="your-subject" value="" class="wpcf7-form-control wpcf7-text" size="40" />
</span>
</p>
<p>
Your Message<br />
<span class="wpcf7-form-control-wrap your-message">
<textarea name="your-message" class="wpcf7-form-control wpcf7-textarea" cols="40" rows="10"></textarea>
</span>
</p>
<p>
Please Enter The Text Below<br />
<span class="wpcf7-form-control-wrap captcha-715">
<input type="text" name="captcha-715" value="" class="wpcf7-form-control wpcf7-captchar" size="40" />
</span>
</p>
<p>
<input type="hidden" name="_wpcf7_captcha_challenge_captcha-715" value="1614713562" /><img alt="captcha" src="http://inauguralseason.com/wp-content/uploads/wpcf7_captcha/1614713562.png" class="wpcf7-form-control wpcf7-captchac wpcf7-captcha-captcha-715" width="84" height="28" />
</p>
<p>
<input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" />
</p>
<div class="wpcf7-response-output wpcf7-display-none"></div>
</form>
</div>
</div>
<footer class="entry-meta"></footer><!-- .entry-meta -->
</article><!-- #post-12 -->
</div>
</body>
</html>
更新:
floatbox 宽度问题取决于 iframe 样式，在“style.css”文件的第 1535 行定义:
/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
max-width: 100%;
}
关于css - Wordpress floatbox 问题 IE，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13019694/
相关文章：
javascript - MoveTargetOutOfBoundsException Selenium IE9/FireFox
javascript - FlexSlider 卡顿/淡入淡出滞后
css - ion-scroll 滚动条不在 android 中显示
javascript - XMLHttpRequest 文件上传在 IE11 中不起作用
javascript - 折叠在 IE11 上不起作用(Object.keys : argument is not an Object)
:nth-child selector on class includes other elements 的 css 样式