时间戳

首页 > 解决方案 > 页面在 Firefox 和资源管理器中未正确显示

css - 页面在 Firefox 和资源管理器中未正确显示

问题描述

问题是，我正在尝试为所有浏览器测试我的模板，它在 Chrome 中看起来不错（我主要使用它），但在 Firefox 和 Explorer 中看起来不太好。

我尝试使用前缀，我在括号中使用自动前缀以确保一切正常。在 Firefox 中，没有显示背景，并且搜索栏没有我给它的正确填充。与资源管理器相同，但搜索栏很好，但背景不是很多。

.header {
  background-image: url(images/headerimg.webp);
  background-size: cover;
  background-position: center;
  height: 300px;
  padding: 0;
  margin: 0;
  text-align: center;
}

.searchContainer {
  float: left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.search {
  padding: 7px 10px !important;
  border-radius: 0 4px 4px 0;
  font-size: 17px;
  border: 2px solid #363a5e;
  border-left: none;
  width: 360px;
  color: #666a8c;
  margin: 1px 0 0 -3px;
  background-color: #363a5e;
  -webkit-transition: .2s;
  transition: .2s;
}
<header class="header jumbotron" role="heading" aria-level="1">
  <div class="filter">
    <div class="container">
      <div class="mobileOpenContainer">&nbsp;
        <span onclick="openNav()" class="showNavSearch"><i class="fas fa-bars"></i></span>
        <span onclick="openSearch()" class="showNavSearch" id="search"><i class="fas fa-search"></i></span>
      </div>
      <div class="logoNavContainer" role="img">
        <a href=""><img class="logo" src="images/Logo.svg" alt="logo"></a>
        <nav>
          <ul class="navbar" role="navigation">
            <a href="#">
              <li class="nav">خانه</li>
            </a>
            <a href="#">
              <li class="nav">تبلیغات</li>
            </a>
            <a href="#">
              <li class="nav">تماس با ما</li>
            </a>
            <a href="#">
              <li class="nav">خرید قالب</li>
            </a>
          </ul>
        </nav>
      </div>
      <div class="reqSearchContainer">
        <button class="request" role="button"><i class="fas fa-film"></i>درخواست انتشار</button>
        <button class="request" role="button"><i class="fas fa-heart"></i>حمایت از ما</button>
        <div class="searchContainer">
          <label>
                            <input class="search" placeholder="جستوجو..." aria-label="Searchbar">
                            <a href="#"><span class="searchBtn" aria-label="Search button"><i class="fas fa-search"></i></span></a>
                        </label>
        </div>
      </div>
</header>

这就是它在 Chrome 中的样子（应该如何）：

这是火狐：https://imgur.com/nWpUsD4

IE和火狐一样，但是搜索栏没问题。

标签： css

解决方案

好的，我找到了一种方法，但对于一些与我有同样问题的人来说，这可能不是最好的：

首先，为了能够看到背景，我不得不更新到 Firefox 65+，因为从那个版本开始支持 .webp，看来（对于 IE，它根本不支持它，这是一个耻辱，所以我只是把它改成jpg）

然而，对于搜索栏，我没有找到任何修复填充的好方法，所以我只是height在 CSS 中使用它来给它固定高度，这也解决了这个问题，但对于某些人来说可能不是最佳选择。

推荐阅读