如何在Safari中工作，在MAC上使用Chrome

I have a page with the following CSS, it renders fine on IE and FF, but on Mac in Safari and Chrome the min-height does not seem to work and all the content collapses on top of each other when the browser page is short instead of staying extended and providing scrollbars:

我与以下页面的CSS,它呈现细IE和FF,但在Mac在Safari和Chrome的最小高度似乎并没有工作,所有内容彼此当浏览器页面之上的崩溃是短暂的而不是保持扩展和提供滚动条:

<style type="text/css">
    html, body {
   height: 100%;
        width: 100%;
    }
    body {
   height: 100%;
        width: 100%;
        background: #000000;
        font: 86% Arial, "Helvetica Neue", sans-serif;
        margin: 0;   
        padding: 0px;
        color: #CCCCCC;
    }
    #website_wrapper {
        min-height: 850px;
   min-width: 1080px;
        height: 100%;
        width: 100%;
    }
    #website {
        height: 100%;
        width: 100%;
        background-color: #000000;
        vertical-align: bottom;
    }

Any ideas why Safari (WebKit I guess) is not doing what it is told to do? Thanks in advance...

你知道为什么Safari(我猜是WebKit)不按要求做吗?提前谢谢…

3 个解决方案

#1

For some reason I'm encountering as similar issue, where my navbar on Safari is a different height to other browsers.

出于某种原因，我遇到了类似的问题，我在Safari上的导航条与其他浏览器的高度不同。

To fix it I have used min-height: initial

为了解决这个问题，我使用了min-height: initial

I also wrapped this in a safari-specific media query, to avoid possible conflicts:

我还将其封装在一个特定于安全性的媒体查询中，以避免可能的冲突:

is there a css hack for safari only NOT chrome?

safari有css黑客吗?

#2

The following example works for me on Mac OS X 10.6.4 using Safari 5.0.1 (not sure which version of Webkit):

以下示例适用于使用Safari 5.0.1(不确定Webkit的哪个版本)的Mac OS X 10.6.4:

<html>
    <head>
    <!--
        <style>
        .box1 {
            float: left;
            width: 100px;
            margin: 1em 20px 1em 0;
            background: yellow;
            border: 1px solid black;
            min-height: 100px;
        }
    -->
    </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box1">less text</div>
        <div class="box1">more text more text more text more text more text more text</div>
    </body>
</html>

I can't tell from your example how you are implementing your styles as you only show your style definitions. Another thing I've noticed is that you are defining ID styles (# notation) instead of class styles (dot notation). Though that also works, it's recommended that you define class styles when you want to apply a style to multiple elements.

我无法从您的示例中看出您是如何实现您的样式的，因为您只显示您的样式定义。另一件我注意到的事情是，您正在定义ID样式(#符号)而不是类样式(点符号)。虽然这也可以，但是建议您在想要将样式应用到多个元素时定义类样式。

If this example doesn't help you, perhaps you can paste some HTML that shows HOW you are using your styles.

如果这个例子对您没有帮助，也许您可以粘贴一些显示您如何使用样式的HTML。

#3

min-height is supposed to be supported in Safari now but you might want to try the underscore hack:

现在Safari中应该支持最小高度，但您可能想尝试下划线破解:

min-height: 850px; height: auto; _height: 850px;

最小高度:850 px;高度:汽车;_height:850 px;

#1