CSS 在 safari 中被 inline-block 破坏-未设置宽度为零答案

【问题标题】：CSS broken with inline-block in safari - width of zero not setCSS 在 safari 中被 inline-block 破坏-未设置宽度为零
【发布时间】：2013-12-31 21:55:16
【问题描述】：

我正在尝试在 twitter bootstrap (2.3.2) 中创建水平手风琴。我在网上找到了一些运行良好的 css，并允许我利用现有的 js。这一切都很好 - 除了在 safari（iOS 和 Windows）中。在 safari 中，即使宽度正确设置为 0px，折叠的元素仍会保留一些宽度。

我创建了一个小提琴： http://jsfiddle.net/foetalstalk/3erSh/

我使用的css是：

.accordion-group, .accordion-heading, .accordion-body
{
    display:inline-block;
}
.collapse
{
    height:auto;
    width:auto
}
.collapse.height
{
    height:0;
    -webkit-transition:height .35s ease;
    -moz-transition:height .35s ease;
    -o-transition:height .35s ease;
    transition:height .35s ease;
}
.collapse.width
{
    width:0;
    -webkit-transition:width .35s ease;
    -moz-transition:width .35s ease;
    -o-transition:width .35s ease;
    transition:width .35s ease;
}
.collapse.width.in
{
    width:auto
}
.collapse.height.in
{
    height:auto
}

我正在 Windows 上开发，可以使用从此处下载的 safari 复制问题： http://support.apple.com/kb/dl1531

问题似乎出在 inline-block 元素上。可以用一点 css 魔法来解决这个问题吗？

【问题讨论】：

Safari 5.1？严重地？您应该首先测试 6.1 和 7。
尝试将 font-size/line-height 设置为 0 以隐藏元素
Chrome(Win 7) 也有问题。
是的，我应该在 safari 6+ 中进行测试，但我没有 mac。这个问题出现在 iOS 设备上。我最关心的就是这些。如果我可以在 safari 上修复它，我可以为 windows 下载我认为它会在我真正关心的 iOS 设备上修复它。
@Anon - 将 font-size/line-height 设置为 0 不起作用。还是谢谢你。

标签： html css twitter-bootstrap safari

【解决方案1】：

尝试使用max-width:0; 和max-width:1000px;。这对我有用

.collapse.width
{
    width:0px;
    max-width:0;
    -webkit-transition:width .35s ease;
    -moz-transition:width .35s ease;
    -o-transition:width .35s ease;
    transition:width .35s ease;
}
.collapse.width.in
{
    width:auto;
    max-width:1000px;
}

DEMO

【讨论】：

效果很好。不过，我在过渡到开放时看到了一个奇怪的“反弹”。你看到了吗？
是的，我也看到了。请用“全部”替换过渡中的“宽度”。过渡：所有 .35s 轻松；
我还是反弹了。 bootstrap 是否使用 jquery 手动设置动画？我看到一个 style="width:auto;"在检查器中查看时在 div 上。也许这是干扰？
将最大宽度过渡设置为非常短，将最终最大宽度设置为更接近实际最终宽度似乎很好。第一次转换非常突然 - 但看起来还不错。jsfiddle.net/foetalstalk/3erSh/9
将初始宽度设置为 1px 似乎可以修复第一个过渡。当它折叠之后有一个添加元素 style="width:0px;"这搞砸了。 :-((jsfiddle.net/foetalstalk/3erSh/11

【解决方案2】：

感谢匿名的帮助。

碰巧按照 Anon 的建议从头开始创建它更容易。

http://jsfiddle.net/foetalstalk/N2GSV/23/

.accord-group, .accord-heading, .accord-body
{
    display:inline-block;
}
.accord-body 
{
    vertical-align:top;
    visibility:hidden;
    /* non zero width - for safari */
    margin-left:-1px;
    width:1px;
    -webkit-transition:all 0.35s ease;
    -moz-transition:all 0.35s ease;
    -o-transition:all 0.35s ease;
    transition:all 0.35s ease;
    overflow:hidden;
}

.accord-body.in 
{
    visibility:visible;
    margin-left:0px;
    width:100px;
}

有关 html 和 js，请参阅 fiddle。

【讨论】：