Question

这是我今天才刚刚遇到的一个问题，并且想知道可能导致这样一个奇怪问题的原因。

我已经看过一些示例网站，他们都遇到了同样的问题。我打开了Chrome开发人员工具进行检查，与这些元素相关的CSS显示在＆＃34; @media all＆＃34;。

基本上，当在运行iOS 8.1.2的iPad上查看网站时，它似乎完全忽略了特定元素的CSS。这就是它在iPad上的样子（糟糕）：

http://i.imgur.com/wd4xnq4.png

现在这就是我在Windows上使用Chrome时看到的内容（CSS加载和使用，好的版本......）：

http://i.imgur.com/3aMNPXF.png

我之前从未见过这样的情况，并且在没有JS的情况下，CSS没有加载JavaScript，所以我完全难以接受。请帮助。

修改

这是代码。我已经进行了双重检查，当您点击它时，似乎添加了一类.active以显示它是当前所选项目。

编辑2

以下是所有代码，而不仅仅是按钮本身：

.product-view .product-collateral{
  width: 100%;
  float: left;
  margin:15px 0 0;
}

.product-view .product-collateral #product_tabs ul.r-tabs-nav{
  width: 100%;
  float: left;
}

.product-view .product-collateral #product_tabs ul.r-tabs-nav li{
  float: left;
  margin:0 5px 0 0;
}

.product-view .product-collateral #product_tabs ul.r-tabs-nav li a{
  padding:10px 15px;
  display: block;
  background-color: #bcbec0;
  color: #fff;
}

.product-view .product-collateral #product_tabs ul.r-tabs-nav li.r-tabs-state-active a{
  background-color: #fff;
  color: #333333;
}

.product-view .product-collateral #product_tabs .tab{
  width: 100%;
  float: left;
  background-color: #fff;
  padding:15px;
}

Answer 1

您使用什么浏览器在iPad上进行测试？谷歌Chrome也？您是否在为CSS使用特定于浏览器的规则？根据使用的浏览器，有些元素需要多次声明。

Answer 2

我已经弄明白了这个问题。我不是最初在这方面工作的开发人员，所以开始时这是一个令人头疼的问题。

事实证明iPad的分辨率直接落在移动视图端口大小和桌面视图端口大小之间，所以我只需要将移动CSS放在专为iPad设计的新媒体视图端口中。我会发布我的发现，但这应该有用（希望如此）。

修改

是的，所以事实证明有一个媒体查询被设置为大而且落在两个目标尺寸之间，并且iPad尺寸正好在中间。

所以基本上它只是一个display: block;，它位于媒体查询之外，这意味着错过了所有的CSS，因此只显示了文本。解决！

在iPad上查看时忽略CSS

2 个答案: