CSS在Firefox中有效，但在Chrome中不可用 [英] CSS working in Firefox but not Chrome

问题描述

我已经在WordPress HTML中的header.php中添加了搜索菜单:

I have added a search menu to header.php in WordPress HTML:

 <!-- Collect the nav links, forms, and other content for toggling -->
                  <?php
                  // Main menu
                  echo $primary_menu;
                  ?>
                  <div id="search"><?php get_search_form();?></div>
                            </div><!--end container-->

我在现有模板中添加了< div id ="search"><?php get_search_form();?></div> .

I added <div id="search"><?php get_search_form();?></div> to the existing template.

我对搜索菜单进行了一些样式更改: .input-group .form-control {height:36px！important;}

I have made some style changes to the search menu: .input-group .form-control {height:36px !important;}

这些更改已在Firefox中实现，但在Chrome中不可见.当我使用Firebug检查元素时，您可以看到代码可见.当我检查Chrome中的元素时，据我所知，它根本没有出现.

These changes are implemented in Firefox but are not visible in Chrome. When I inspect the element with Firebug you can see the code is visible. When I inspect the element in Chrome it doesn't (as far as I can see) appear at all.

我还没有应用任何跨浏览器CSS吗?我犯了什么主要的罪过?

I have not applied any cross browser CSS should I? What cardinal sin have I commited?

网站URL为:首页

谢谢.

推荐答案

您使用了太多的！important"语句.您的CSS显示:

You are using too many "!important" statements. Your CSS shows:

.input-group {
    margin-top: 10px !important;
    width: 380px !important;
    background-color: #f4f4f4 !important;
    height: 30px !important;
    margin-left: 450px !important;
}

然后:

.input-group .form-control {
    height:36px !important;
}

因此，您两次应用！important都会导致问题.请删除该语句，它应该起作用:

So you are applying !important twice and it is causing the problem. Please remove the statements and it should work:

.input-group {
    margin-top: 10px !important;
    width: 380px !important;
    background-color: #f4f4f4 !important;
    height: 30px;
    margin-left: 450px !important;
}

.input-group .form-control {
    height:36px;
}

这篇关于CSS在Firefox中有效，但在Chrome中不可用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！