Question

我正在Apache HBase的网站上工作，我要讨论的所有CSS都在hbase.apache.org的实时网站上。我在Bootstrap 2.3.2网站上实现了Google自定义搜索引擎，并且大部分都在运行。我在Chrome和Safari IOS中看到了一个怪癖，但在Safari或Firefox中没有。在Chrome和Safari iOS9中，GCSE结果框的高度被截断，因为其包含div的高度设置，而不是高度设置为auto。我以前在网站的其他部分遇到此问题，直到我添加此规则：

for(int i = 0; i < image.getWidth(); i++){
        for(int j = 0; j < image.getHeight(); j++){
            Color tempColor = new Color(image.getRGB(i, j));
            if(tempColor == Color.BLACK){
                System.out.println(tempColor); //Debugging
            }
        }
    }

以下屏幕截图是在浏览器窗口大小相同的情况下进行的，在Chrome上然后是Safari：

Chrome shows the problem

Safari does not

我阅读了关于修复冲突的CSS规则的Bootstrap页面（getbootstrap.com/getting-started/#third-box-sizing），并尝试通过添加以下规则来实现它：

  .collapse.in {
      height: auto;
  }

有人能发现我可能遗失的东西吗？

Answer 1

这是由你的“bootstrap-responsive.min.css”

引起的

@media(max-width: 480px) {
  .nav-collapse {
    -webkit-transform:translate3d(0,0,0)
  }
}

当您的搜索结果可见时，会在主体中添加“gsc-overflow-hidden”类，因此请在选择器中使用该类来禁用transform属性。要做到这一点，请添加：

@media(max-width: 480px) {
    .gsc-overflow-hidden .nav-collapse {
        -webkit-transform: none;
    }
}

Bootstrap 2.3.2与Google自定义搜索结果框冲突

1 个答案: