我有一个问题，在特定条件下仅出现在 OS X 10.8.4 上的 Safari 6.0.5 中。在所有测试条件下，它在 OS X 上的 Firefox 和 Chrome 中运行良好。我没有在 IE 或 Windows 上测试过它。
问题在于使用浮动来定位列的三列布局。在包含的示例代码中，如果第三列中的文本足够短以允许它与页脚之间的空间并且整个页面适合视口，则它可以正确显示。如果它有点长，则列文本会流入页脚。如果它足够长以流出导致滚动的视口，则它可以正常工作。您可以通过上下移动浏览器窗口的底部来测试它。
该页面具有创建粘性页脚的代码。你可以在#force-full-page 和#push 在style.css 中看到它的大部分代码。如果我不使用它，我认为我不会遇到这个问题。
鉴于它适用于 Firefox 和 Chrome，我怀疑它存在 Safari 错误。我的代码可能有问题，而我对其他浏览器很幸运吗？如果它是一个错误，我能做些什么让它在 Safari 中工作吗？对于不使用浮动的页面，我没有这个问题。
我记得有一个网站可以加载代码供人们测试。我不记得它的名字了。它还在吗？如果是这样，我会将代码加载到其中。
php文件中的html：
<?php
?>
<html>
<head>
<title>Test Web Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=">
<link href="../test/screen.css" rel="stylesheet" type="text/css">
</head>
<body class="home">
<div id="force-full-page">
<header id="page-header">
<section id="header-box">
<h2>Test Website</h2>
<p class="sub-heading">State your mission</p>
</section>
</header>
<div id="bounding-box">
<section class="body-title">
<h1>Welcome to the Test Web Site</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="left-column">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</section>
<section class="middle-and-right-columns">
<section class="middle-column">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="right-column">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</section>
</section>
<div id="push"></div>
</div> <!-- /bounding-box -->
</div> <!-- /force-full-page -->
<footer id="page-footer">
<section id="footer-box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</footer></body>
</html>
屏幕.css
@import url("reset.css");
@import url("style.css");
重置.css
@charset "utf-8";
/* CSS Document */
/* Courtesy of Eric Meyer
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
样式.css
@charset "utf-8";
/* CSS Document */
html
{
height: 100%; /* Required for #force-full-page */
}
body
{
height: 100%; /* Required for #force-full-page */
background-color: #bdcadb;
color: #000000;
}
#force-full-page
{
margin: 0 auto -11.25em; /* Last parm must be the sum of #footer-box height: + padding: */
min-height: 100%;
height: auto !important;
}
#page-header
{
background-color: #336799;
}
#header-box
{
position: relative;
height: 10em;
width: 62em;
margin: 0 auto;
background-color: #336799;
}
#bounding-box
{
position: relative;
width: 62em;
margin: 0 auto;
}
.container
{
position: relative;
width: 62em;
margin: 0 auto;
background-color: #336799;
}
.left-column
{
float: left;
width: 20em;
}
.middle-and-right-columns
{
float: right;
width: 42em;
}
.middle-column
{
float: left;
padding-left: 1em;
width: 20em;
}
.right-column
{
float: right;
padding-left: 1em;
width: 20em;
}
#push
{
height: 9.75em; /* Must equal foot-box height: */
}
#page-footer
{
clear: both;
background-color: #336799;
}
#footer-box
{
position: relative;
height: 9.75em; /* Must equal #push height: */
width: 62em;
margin: 0 auto;
padding-top: .25em;
padding-bottom: 1.25em;
color: #021730;
}
.body-title
{
margin-top: .5em;
text-align: center;
}
h1
{
font-family: 'Trebuchet MS', Arial, sans-serif;
font-size:2.4em;
line-height: 1.25; /* */
margin: 1.25em 0 1.25em 0;
}
h2
{
font-family: 'Trebuchet MS', Arial, sans-serif;
font-size: 2.0em;
line-height: 1.5em;
margin: 1.5em 0 1.5em 0;
}
h3
{
font-family: 'Trebuchet MS', Arial, sans-serif;
font-size: 1.6em;
font-weight:normal;
line-height: 1.5625;
margin: 1.5625em 0 1.5625em 0;
}
h4
{
font-family: 'Trebuchet MS', Arial, sans-serif;
font-size: 1.125em;
line-height: 1.375em;
margin: 1.375em 0 1.375em 0; /* 2.8em */
color: inherit;
}
p , dd, ul
{
font-size: 1.125em;
line-height: 1.375em;
margin: 1.375em 0 1.375em 0;
color: inherit;
}
#page-header h2
{
font-family: 'Trebuchet MS', Arial, sans-serif;
font-size: 2.0em;
line-height: 1.0em;
margin: 0 0 0.5em 0;
color: #bdcadb;
color: #ffffff;
}