0

在运行 iOS6 的 iPhone4 上测试网站时，我遇到了一个奇怪的显示问题。

出于某种原因，iPhone 忽略了显示：inline；单击父链接时的规则。我一直在使用 Safari 开发人员工具浏览测试站点，并且切换类名称按预期工作。

我正在使用这段 javascript 来切换 div 上的类名：

$('.toggle').click(function() {
$(this).toggleClass('toggle');
$(this).toggleClass('toggle_open');
});

标记如下所示：

<div class="toggle">
  <a href="#" class="level1"><span>Parent</span></a> 
    <div>
       <a href="#"><span>Child 1</span></a>
       <a href="#"><span>Child 2</span></a>
       <a href="#"><span>Child 3</span></a>
    </div>
</div>

CSS：

div.toggle div { display: none; }
div.toggle, div.toggle_open  { display: inline; }

如果我将 display: inline 更改为 inline-block 它可以工作。如果我完全删除 display: inline 它可以工作，但会导致浏览器出现显示问题。我想使用 display: inline; 因此，如果需要，我的标记内容会显示在 1 行或 2 行。

我知道我可以使用 modinizer 为“触摸”和“无触摸”创建规则，但这对于可能是我的代码创建的错误的东西来说似乎太过分了:)

我做了什么让移动版 Safari 感到不安？

4

0 回答 0