在iPad上查看时忽略CSS

这是我今天才遇到的一个问题，我想知道是什么导致了这样一个奇怪的问题。

我看了几个示例网站，它们都遇到了相同的问题。我打开了Chrome开发工具进行检查，与这些元素相关的CSS显示在"@media-all"下。

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

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

现在这是我在Windows上使用Chrome时看到的（CSS加载并使用，好版本…）：

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

我以前从未见过这种情况，而且CSS没有加载禁用JS的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;
}