1

我正在 www.magalidb.0fees.net 上制作一个投资组合网站，但在多个浏览器中正确显示我的网站时遇到了一些问题。问题在于，在某些浏览器中，只有内容的下半部分（位于容器内）是可见的，而上半部分位于浏览器窗口顶部的某个位置。要查看示例，请尝试在 Firefox、Opera 或 Internet Explorer 中打开我的网站。

有一些验证错误，但并不那么紧急。这些错误都与网站的行为无关。顺便说一下，该网站是用 HTML5 编写的，并使用常规 CSS 和 CSS3。

问题似乎与垂直居中有关。我将容器的内容水平和垂直居中。

为了使容器水平居中，我使用了以下 CSS：

#container {
min-height: 100%; /* To make sure it reaches the bottom of the browser page */
width: 940px;
margin-left: auto; /* Center horizonticallly */
margin-right: auto; /* Center horizontically */
overflow: hidden;
overflow-y: hidden; /* Vertical scrollbar fix for IE */ }

垂直居中具有以下 CSS：

#valigner {
width: 720px;
position: absolute;
top: 50%;
bottom: 50%;
height: 500px;
margin-top: -45%;   
margin-bottom: -45%;
margin: -40% 0 0 220px; }

220px 只是为了让内容和标题不会粘在侧边栏后面。

这是我的索引页正文中代码的一般布局：

<body>
<div id="container">
<div id="sidebar" class="left">
    <?php include('sidebars/sidebar.php'); ?>
    </div>
<div id="valigner">
    <div id="sidebar-bottom" class="left"></div>
    <div id="head" class="right"><h1>Magali&#39;s portfolio</h1></div>
    <div id="main" class="right">
        <div id="content-textbox">
            <div class="intro-left">
                Text comes here.
                            </div>
            <div class="intro-right">
                <img alt="Me!" class="resizeProfile" src="images/magali.jpg">
            </div>
        </div> <!-- Closing of div content-textbox -->
    </div> <!-- Closing of div main -->
    <div id="footer" class="right">
        <?php include('language.php'); ?>
    </div>
</div> <!-- Closing of div valigner -->
</div> <!-- Closing of div container -->
</body>

请查看我的网站 (http://www.magalidb.0fees.net)。它在 Chrome 和 Safari 中正确显示，但在 Firefox、Opera 和 Internet Explorer 中显示不正确。我对此感到非常困惑，因此非常欢迎任何帮助。

！！！编辑！！！

我找到了！它现在完美运行。

我将容器和 valigner 中的代码替换为以下内容：

#container {    
position: absolute; 
top: 50%; 
width: 100%; 
height: 1px; 
overflow: visible;
}

#valigner { 
position: absolute; 
left: 50%; 
width: 940px; 
margin-left: -470px;
height: 540px; 
top: -270px 
}

代码解释了自己，它是如此合乎逻辑。我搜索了一种将内容水平和垂直居中的替代方法，并找到了这个。我现在觉得很傻，因为我以前用过这个方法，但我忽略了它，因为我认为它已经过时了......

无论如何，谢谢你们的帮助！非常感谢。;)

PS：我无法回答我自己的帖子。我试过了，但我收到一条通知：“声望低于 10 的用户在提问后 8 小时内无法回答自己的问题。您可以在 5 小时内自行回答。在此之前请使用评论，或编辑您的问题。 ”。所以我编辑了我的问题，就像通知建议我一样。我计划在这 5 个小时后再次编辑问题并以正确的方式发布答案，但在那之前我不能做得比这更好。对不起！

4

1 回答 1

1

我知道你已经回答了你的问题，但我对你如何编写你的网站有点困惑。这可能是有正当理由的，如果是这样，版主可以删除我的评论，但我认为您不需要所有定位的东西，尤其是在#container和#valigner元素上。事实上，我认为你可以在#container元素上使用 2 个属性来做到这一点，而不是使用任何杂乱的position: absolute;技术或任何东西。这是我的建议：

#container {
    width: 940px; // or whatever you want the width to be. I think this is what you specified originally.
    margin: 25px auto; // Centre the design in the middle of the page and put it 25px from the top and bottom of the browser window.
}

我想就是这样。您可以删除#valigner并使用它。如果您继续在position: absolute;任何地方使用，尤其是在最顶层的包含元素上，那么以后一切都会变得非常混乱。

于 2012-09-17T20:44:41.227 回答