Question

使用Bootstrap和Safari时遇到问题。

我想放置一个相对于其父级的固定div，它适用于除Safari之外的所有浏览器。

这里解释了同样的问题： https://github.com/lionheart/openradar-mirror/issues/147

现在我尝试找到一个好的解决方法：

原始代码（在Safari中不起作用）

<div class="row">
   <div class="col-md-8 col-md-push-4">
      <div class="fixed-div">SOME FIXED CONTENT</div>
      CONTENT A
   </div>
   <div class="col-md-4 col-md-pull-8">
      CONTENT B
   </div>
</div>

的CSS：

.fixed-div{
   position:fixed;
}

这在Safari中无法正常工作。 “fixed-div”不像它的父母一样被“推”。它应显示在“内容A”上方。

我找到了一个解决方案，但我认为这不是一个干净的解决方案：

<div class="row">
   <div class="col-md-4">
   </div>
   <div class="col-md-8">
      <div class="fixed-div">SOME FIXED CONTENT</div>
   </div>
   <div class="clearfix"></div>

   <div class="col-md-8 col-md-push-4">
      CONTENT A
   </div>
   <div class="col-md-4 col-md-pull-8">
      CONTENT B
   </div>
</div>

你有更好的想法如何解决这个问题吗？

Answer 1

尝试切换到fixed到absolute的CSS属性。如果这不能解决您的问题，您可以在HTML之前添加自定义检查，以查看用户来自哪个浏览器并加载该特定CSS页面How to use different CSS for Different Browsers。

在相对div内显示固定div，百分比偏移[SAFARI bug]

1 个答案: