0

特定の条件下で、OS X 10.8.4 上の Safari 6.0.5 でのみ発生する問題があります。すべてのテスト済み条件下で、OS X 上の Firefox および Chrome で問題なく動作します。IE や Windows ではテストしていません。

問題は、フロートを使用して列を配置する 3 列のレイアウトにあります。含まれているコード例では、3 番目の列のテキストが十分に短く、フッターとの間にスペースがあり、ページ全体がビューポートに収まる場合、正しく表示されます。もう少し長い場合は、列のテキストがフッターに流れ込みます。スクロールの原因となるビューポートから流れ出すのに十分な長さの場合、正しく機能します。ブラウザ ウィンドウの下部を上下に動かしてテストできます。

このページには、スティッキー フッターを作成するコードが含まれています。コードのほとんどは #force-full-page と #push in 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>

screen.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;
}
4

1 に答える 1