我在http://inauguralseason.com/获得了这个网站，如果您在 IE 8 中单击“联系我们”，页面会在浮动框中打开，问题是浮动框占据了整个屏幕，并且联系表格应该居中。 ..任何人有任何想法为什么它这样做？
问问题
299 次
3 回答
1
我想你的问题是“为什么联系表格没有居中”，而不是“为什么浮动框占据了整个屏幕”。
您的浮动框内容是一个iframe来源为http://inauguralseason.com/?page_id=12
的表单包含在一个divwith 类中contactBackground；此类在style.css文件中定义，并具有margin: auto应使其居中的属性。
不幸的是，正如您在此处阅读的那样，此方法在 IE8 怪癖模式下不起作用；如说明中所述，floatbox 不支持此模式。
解决方案只是DOCTYPE在页面开头添加一个声明。
查看 floatbox iframe 的源代码，我还注意到缺少<html>and标签，因此您还应该添加这些标签。
生成的 HTML 代码应该是这样的：<body>
<!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>
更新：
浮动框宽度问题取决于 iframe 样式，定义在“ style.css ”文件的第 1535 行：
/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
max-width: 100%;
}
于 2012-11-01T10:48:32.463 回答
0
我以前没有真正使用过 floatbox，但我认为它会有额外的选项，例如设置联系表单出现的模式的高度和/或宽度。
于 2012-10-29T13:54:21.573 回答
0
页面源代码有多个 HTML 元素：S 浮动框本身实际上是这些实例之一的主体。嗯，有你的问题。我会冒险猜测您正在使用某种插件，该插件应该只是拉动浮动框容器，而是抓取整个文档。
在解决 HTML 标记问题之前，您可以做（或想做）的事情并不多。之后，定位容器并调整大小/间距应该非常简单：#container { width: Xpx; 高度：Ypx；填充：Zpx；（等等，等等}，假设您知道所需的尺寸，您可以通过用户样式覆盖在 WordPress 中执行此操作。
希望这可以帮助。
于 2012-10-31T18:02:57.597 回答