css宽度0和safari中的溢出隐藏问题

我遇到了我认为Safari中存在的一个错误，并且想知道是否有人能够阐明为什么会发生这种结果。我在下面列出了一个非常简单的例子，但基本上我的问题是这样的。我有一个宽度为300px，高度为80px的子元素，我有一个嵌套在父宽度为0px并且隐藏溢出的子元素。这两个元素被包装在一个没有设置宽度的容器中，并且所有三个元素都是左侧浮动的。内容被父级隐藏，但是包装它们的容器正在扩展“隐藏”子级的整个宽度。在除Safari之外的每个浏览器中都很出色，我不知道为什么。css宽度0和safari中的溢出隐藏问题

summary：width：0px;和溢出：隐藏;在Safari

<html> 
<head> 
<title></title> 
<style type="text/css"> 
    #container {background: rgba(0,0,255,1); float: left;} 
    #block {width: 0px; background: rgba(255,0,0,0.50); float: left; overflow: hidden;} 
    #content {width: 300px; height: 80px; background: rgba(0,255,0,0.50);} 
</style> 
</head> 
<body> 
<div id="container"> 
    <div id="block"> 
     <div id="content"></div> 
    </div> 
</div> 
</body> 
</html>

来源

2013-10-18 deathtrap

适合我工作。 – ediblecode

将上面的块复制并粘贴到html页面中。在Safari，Chrome和Firefox中查看该页面。您将在Safari中看到蓝色的300x80矩形，但不会在Chrome或Firefox中看到。 – deathtrap

如果您presentnig该专区内的文本不起作用。然后，你应该尝试零字体大小。

.class{ 
font-size:0; 
}

或者使用文本缩进

的.class { TEXT-INDENT：-999px }

来源

2013-10-18 14:37:04

我不会呈现文字。如果你看看上面的例子，Safari基本上禁用overflow：hidden;如果元素的宽度为0. – deathtrap

@deathtrap这是Safari浏览器的bug。如果上面的选项对你来说没问题。其他然后我不能提供很多，因为我是个人电脑的家伙，不打扰太多的野生动物园。 – 2013-10-18 14:43:40

如果您还设置height: 0;上#block您的问题将得到解决。不知道为什么这是发生虽然：/

来源

2013-10-21 10:22:11

css宽度0和safari中的溢出隐藏问题

回答

相关问题