1. 首頁
  2. 問答
  3. CSS - Firefox和IE中的不同渲染

CSS - Firefox和IE中的不同渲染

2014-10-20 134 views
0

我正在研究一個網站模板，我與您聯繫，因爲我找不到問題出在哪裏。CSS - Firefox和IE中的不同渲染

如果你選擇了它在谷歌瀏覽器，搜索結果欄（.resultbar）下的圖像（<ul></ul>#results內）很好一致，但在Firefox和IE瀏覽器，它看起來怪異，就像如果有一個左邊距第一個圖像，所以他們都被取代了。

我貼在這裏的所有代碼和codepen鏈接下它：

<body> 
<header> 
<div id="top-header"> 
    <a href="#" id="logo"></a> 
    <nav> 
     <ul> 
      <a href='#' class='menu-link'><li>Videos</li></a> 
      <a href='#' class='menu-link'><li>Categories</li></a> 
     </ul> 
     <a href="#" id="menu-icon"></a> 

    </nav> 
</div> 
<div id="down-header"> 
<div id="form-container"> 
    <!--<input type="submit" id="searchsubmit" value="" />--> 
    <a class="search-submit-button" href="javascript:search()"> 
     <i class="fa fa-search"></i> 
    </a> 
    <div id="searchtext"> 
     <input type="text" id="s" name="s" placeholder="Search 1000’s of videos..."> 
    </div> 
</div> 
<div id="form-filter"> 

    <input class="labeled-checkbox" type="checkbox" id="hd"> 
    <label for="hd" id="hd-checkbox"> 
     <span class="labeled-checkbox-unchecked">HD ONLY</span> 
     <span class="labeled-checkbox-checked">HD ONLY</span> 
    </label> 

    <div class="lenght-filter"> 
     <input type="radio" id="radio1" name="radios" value="short"> 
     <label for="radio1">SHORT</label> 
     <input type="radio" id="radio2" name="radios" value="long"> 
     <label for="radio2">LONG</label> 
     <input type="radio" id="radio3" name="radios" value="all" checked> 
     <label for="radio3">ALL VIDEOS</label> 
    </div> 
</div> 
</div> 
</header> 

<div id="content"> 
<div class="resultbar"> 
<h1>300000 results for "lol"</h1> 
<!-- Sub menu dropdown --> 
<ul class="order-filter"> 
<li> 
<span>Date added</span> <i class="fa fa-caret-down"></i> 
<ul> 
    <li>Relevance</li> 
    <li>Duration</li> 
    <li>Date added <i class="fa fa-check"></i></li> 
</ul> 
</li> 
</ul> 
<!-- /Sub menu dropdown --> 
</div> 
<ul class="cbp-rfgrid" id="results"> 
    <li> 
     <a href="#"><img src="http://example.com/tcimages/pm5544.jpg" /> 
      <div> 
       <h3>Felis catus</h3> 
      </div> 
     </a> 
    </li> 
    <li> 
     <a href="#"><img src="http://example.com/tcimages/pm5544.jpg" /> 
      <div> 
       <h3>Felis catus</h3> 
      </div> 
     </a> 
    </li> 
    <li> 
     <a href="#"><img src="http://example.com/tcimages/pm5544.jpg" /> 
      <div> 
       <h3>Felis catus</h3> 
      </div> 
     </a> 
    </li> 
    <li> 
     <a href="#"><img src="http://example.com/tcimages/pm5544.jpg" /> 
      <div> 
       <h3>Felis catus</h3> 
      </div> 
     </a> 
    </li> 
    <li> 
     <a href="#"><img src="http://example.com/tcimages/pm5544.jpg" /> 
      <div> 
       <h3>Felis catus</h3> 
      </div> 
     </a> 
    </li> 
    <li> 
     <a href="#"><img src="http://example.com/tcimages/pm5544.jpg" /> 
      <div> 
       <h3>Felis catus</h3> 
      </div> 
     </a> 
    </li> 
    <li> 
     <a href="#"><img src="http://example.com/tcimages/pm5544.jpg" /> 
      <div> 
       <h3>Felis catus</h3> 
      </div> 
     </a> 
    </li> 
    <li> 
     <a href="#"><img src="http://example.com/tcimages/pm5544.jpg" /> 
      <div> 
       <h3>Felis catus</h3> 
      </div> 
     </a> 
    </li> 
    <!-- ... --> 
</ul> 
</div> 


</body>

而且這裏的CSS

body { 
    margin: 0; 
    width: 100%; 
    height: 100%; 
    background: black; 
} 

a { 
    color: #F4BEFF; 
    text-decoration: none; 
    font-weight: bold; 
} 

a:hover { 
    color: #444; 
} 

img { 
    width: 100%; 
} 

header { 
    background: url('http://i.imgur.com/RKLjC33.png') repeat scroll #303030; 
    height: 192px; 
    border-bottom: 4px solid #151515; 
    z-index: 100; 
    min-width: 300px; 
    position: fixed; 
    width: 100%; 
} 

#top-header { 
    height: 100px; 
    padding-left: 10%; 
    padding-right: 10%; 
} 

#down-header { 
    padding-left: 10%; 
    padding-right: 10%; 
    background: #28282a; 
    border-top: 4px solid #151515; 
    padding-top: 5px; 
} 

#content { 
    padding-left: 10%; 
    padding-right: 10%; 
    position: absolute; 
    top: 196px; 
    width: 80%; 
} 

#logo { 
    float: left; 
    width: 195px; 
    height: 100%; 
    display: block; 
    font-size: 20px; 
    font-weight: bold; 
    line-height: 80px; 
    letter-spacing: 4px; 
    background: transparent url('http://www.eventbrite.com/custombutton?eid=2482178262') no-repeat; 
    background-position: center; 
} 

@media screen and (max-width: 1200px) { 

    #top-header { 
     height: 100px; 
     padding-left: 10px; 
     padding-right: 10px; 
    } 

    #down-header { 
     padding-left: 10px; 
     padding-right: 5px; 
    } 

    #content { 
     padding-left: 10px; 
     padding-right: 10px; 
     width: -webkit-calc(100% - 20px); 
     width: calc(100% - 20px); 
} 
} 

nav { 
    float: right; 
    padding: 20px; 
} 

.ad { 
    text-align: center; 
    margin-top: 200px; 
} 

#menu-icon { 
    display: none; 
    float: right; 
    width: 40px; 
    height: 60px; 
    background: url(../images/menu-icon.png) no-repeat center; 
} 

a:hover#menu-icon { 
    background-color: #444; 
    border-radius: 4px 4px 0 0; 
} 

ul { 
    list-style: none; 
} 

li { 
    display: inline-block; 
    float: left; 
    padding: 10px; 
    color: #BBB; 
    font-weight: bold; 
    /* font-size: 16px; */; 
} 

.current { 
    color: #2262AD; 
} 

section { 
    margin: 80px auto 40px; 
    max-width: 980px; 
    position: relative; 
    padding: 20px; 
} 
/*MEDIA QUERY*/ 
@media only screen and (max-width : 640px) { 

    header { 
     /*position: absolute;*/; 
    } 

    #menu-icon { 
     display: inline-block; 
    } 

    nav ul, nav:active ul { 
     display: none; 
     position: absolute; 
     padding: 20px; 
     background: #fff; 
     border: 5px solid #444; 
     right: 20px; 
     top: 60px; 
     width: 50%; 
     border-radius: 4px 0 4px 4px; 
    } 

    nav li { 
     text-align: center; 
     width: 100%; 
     padding: 10px 0; 
     margin: 0; 
    } 

    nav:hover ul { 
     display: block; 
    } 
} 

/*Search bar */ 
/*import font awesome css icon library*/ 

#s { 
    background: none repeat scroll 0 0 #fafafa; 
    border: 1px solid #eeeeee; 
    color: #5e5e5e; 
    display: block; 
    font-family: arial, sans-serif; 
    font-size: inherit; 
    padding: 10px; 
    width: 100%; 
    box-sizing: border-box; 
    font-size: 16px; 
    margin: 0; 
    height: 40px; 
} 

#searchtext { 
    overflow: hidden; 
    background: #28282a; 
} 

a.search-submit-button { 
    background: none repeat scroll 0 0 #EF7896; 
    border-bottom: 1px solid #eeeeee; 
    border-right: 1px solid #eeeeee; 
    border-top: 1px solid #eeeeee; 
    color: #5e5e5e !important; 
    display: block; 
    float: right; 
    font-family: inherit; 
    font-size: 20px; 
    padding: 8px 10px; 
    text-align: center; 
    width: 45px; 
    box-sizing: border-box; 
    height: 40px; 
} 

#form-container { 
    min-width: 290px; 
    z-index: 9999; 
       /* width: 100%; */; 
} 

#form-filter { 
    height: 38px; 
    background-color: #28282a; 
    width: 100%; 
    padding-top: 5px; 
    min-width: 290px; 
    z-index: 9999; 
} 

.lenght-filter { 
    float: right; 
    margin-right: 3px; 
    font-size: 11px; 
    font-family: 'Open Sans', sans-serif; 
    font-weight: bold; 
    margin-top: 3px; 
} 

.hd-filter { 
    float: left; 
    margin-left: 25px; 
} 

#results { 
    /* margin-top: 163px; */; 
} 

/*responsive*/ 

#results li { 
/* padding: 0; */; 
} 

.cbp-rfgrid { 
    position: relative; 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    width: 100%; 
} 

.cbp-rfgrid li { 
    position: relative; 
    float: left; 
    overflow: hidden; 
    width: 20%; 
/* Fallback */ 
    width: -webkit-calc(100%/5); 
    width: calc(90%/5); 
    padding: 1%; 
} 

.cbp-rfgrid li a, 
.cbp-rfgrid li a img { 
    display: block; 
    width: 100%; 
    cursor: pointer; 
} 

.cbp-rfgrid li a img { 
    max-width: 100%; 
    margin-bottom: -10%; 
    margin-top: -10%; 
} 

/* Flexbox is used for centering the heading */ 
.cbp-rfgrid li a div { 
    position: absolute; 
    left: 20px; 
    top: 20px; 
    right: 20px; 
    bottom: 20px; 
    background: rgba(71,163,218,0.2); 
    display: -webkit-flex; 
    display: -moz-flex; 
    display: -ms-flex; 
    display: flex; 
    -webkit-align-items: center; 
    -moz-align-items: center; 
    -ms-align-items: center; 
    align-items: center; 
    text-align: center; 
    opacity: 0; 
} 

.cbp-rfgrid li a:hover div { 
    opacity: 1; 
} 

.cbp-rfgrid li a div h3 { 
    width: 100%; 
    color: #fff; 
    text-transform: uppercase; 
    font-size: 1.4em; 
    letter-spacing: 2px; 
    padding: 0 10px; 
} 

/* Example for media query: change number of items per row */ 

@media screen and (max-width: 1190px) { 
    .cbp-rfgrid li { 
     width: 23%; 
/* Fallback */ 
     width: -webkit-calc(92%/4); 
     width: calc(92%/4); 
     padding: 1%; 
    } 
} 

@media screen and (max-width: 945px) { 
    .cbp-rfgrid li { 
     width: 31.3333333%; 
/* Fallback */ 
     width: -webkit-calc(94%/3); 
     width: calc(94%/3); 
     padding: 1%; 
    } 
} 

@media screen and (max-width: 660px) { 
    .cbp-rfgrid li { 
     width: 48%; 
/* Fallback */ 
     width: -webkit-calc(96%/2); 
     width: calc(96%/2); 
     padding: 1%; 
    } 
} 

@media screen and (max-width: 400px) { 
    .cbp-rfgrid li { 
     width: 98%; 
/* Fallback */ 
     width: -webkit-calc(98%/1); 
     width: calc(98%/1); 
     padding: 1%; 
    } 
} 

@media screen and (max-width: 305px) { 
    .cbp-rfgrid li { 
     width: 98%; 
     padding: 1%; 
    } 
} 

.menu-link li { 
    color: #BBB; 
    text-decoration: none; 
    font-family: Arial, sans-serif; 
    font-weight: normal; 
    font-size: larger; 
} 

.menu-link:hover li { 
    color: #FFF; 
} 

.resultbar { 
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #333537), color-stop(100%, #1e1e1f)); 
    background: -moz-linear-gradient(bottom, #1e1e1f 0%, #272729 97.56%, #333537 100%); 
    background: -o-linear-gradient(bottom, #1e1e1f 0%, #272729 97.56%, #333537 100%); 
    background: -webkit-linear-gradient(bottom, #1e1e1f 0%, #272729 97.56%, #333537 100%); 
    background: linear-gradient(bottom, #1e1e1f 0%, #272729 97.56%, #333537 100%); 
    height: 38px; 
    margin-top: 5px; 
} 

.resultbar h1 { 
    font-size: 16px; 
    font-weight: bold; 
    float: left; 
    white-space: nowrap; 
    font-family: Arial, sans-serif; 
    color: white; 
    padding: 10px; 
    margin: 0; 
} 

/*SearchBar design */ 

.order-filter { 
    text-align: left; 
    display: inline; 
    margin: 0; 
    list-style: none; 
    float: right; 
    padding: 0; 
} 

.order-filter li { 
    font: 12px/18px sans-serif; 
    display: inline-block; 
    position: relative; 
    cursor: pointer; 
    background: #4f4f4f; 
    background: -moz-linear-gradient(bottom, #393939 0%, #4f4f4f 97.56%, #636466 100%); 
    background: -o-linear-gradient(bottom, #393939 0%, #4f4f4f 97.56%, #636466 100%); 
    background: -webkit-linear-gradient(bottom, #393939 0%, #4f4f4f 97.56%, #636466 100%); 
    background: linear-gradient(bottom, #393939 0%, #4f4f4f 97.56%, #636466 100%); 
    padding: 4px; 
    color: white; 
    margin-top: 6px; 
    width: 85px; 
    margin-right: 5px; 
} 

.order-filter li:hover { 
    color: #fff; 
} 

.order-filter li ul { 
    z-index: 10000; 
    padding: 0; 
    position: absolute; 
    top: 26px; 
    left: 0; 
    width: 85px; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
    display: none; 
    opacity: 0; 
    visibility: hidden; 
    -webkit-transiton: opacity 0.2s; 
    -moz-transition: opacity 0.2s; 
    -ms-transition: opacity 0.2s; 
    -o-transition: opacity 0.2s; 
    -transition: opacity 0.2s; 
} 

.order-filter li ul li { 
    display: block; 
    color: #fff; 
    text-shadow: 0 -1px 0 #000; 
    width: 83px; 
    margin: 0; 
    background: #1a1a1c; 
    border-bottom: 1px solid #373737; 
    border-left: 1px solid #373737; 
    border-right: 1px solid #373737; 
} 

.order-filter li ul li:hover { 
    color: #ee577c; 
} 

.order-filter li:hover ul { 
    display: block; 
    opacity: 1; 
    visibility: visible; 
} 

.order-filter li i { 
    float: right; 
    margin-top: 2px; 
} 

/* 
* CSS Labeled Checkbox 
* 
* @author: Francisco Neves 
* @site: www.francisconeves.com 
*/ 

/** Reset */ 
* { outline: none !important; } 
a, a:visited, a:hover, a:active { text-decoration: none; color: inherit; } 

/** 
* ==== Custom Labeled Checkboxes ==== 
*/ 
    /** Fonts */ 
    @font-face 
    { 
     font-family: 'open_sans_lightregular'; 
     src: url('../fonts/opensans-light-webfont.eot'); 
     src: url('../fonts/opensans-light-webfont.eot?#iefix') format('embedded-opentype'), 
      url('../fonts/opensans-light-webfont.woff') format('woff'), 
      url('../fonts/opensans-light-webfont.ttf') format('truetype'), 
      url('../fonts/opensans-light-webfont.svg#open_sans_lightregular') format('svg'); 
     font-weight: 800; 
     font-style: normal; 
    } 

    @font-face 
    { 
     font-family: 'open_sans_semiboldregular'; 
     src: url('../fonts/opensans-semibold-webfont.eot'); 
     src: url('../fonts/opensans-semibold-webfont.eot?#iefix') format('embedded-opentype'), 
      url('../fonts/opensans-semibold-webfont.woff') format('woff'), 
      url('../fonts/opensans-semibold-webfont.ttf') format('truetype'), 
      url('../fonts/opensans-semibold-webfont.svg#open_sans_semiboldregular') format('svg'); 
     font-weight: normal; 
     font-style: normal; 
    } 

    /** Freebie */ 
    input[type=checkbox].labeled-checkbox 
    { 
     display: none !important; 
    } 

    input[type=checkbox].labeled-checkbox + label 
    { 

     display: table; 
     max-width: 170px; 
     font-size: 11px; 
     padding: 10px; 
     background:#373737 url('../images/pagination-gradient-x.png') repeat-x; 
     color: #a7a7a7; 
     cursor: pointer; 

     border-radius: 1px 1px 1px 1px; 
     -moz-border-radius: 1px 1px 1px 1px; 
     -webkit-border-radius: 1px 1px 1px 1px; 


     transition: background-color 200ms; 
     -moz-transition: background-color 200ms; 
     -webkit-transition: background-color 200ms; 
     -o-transition: background-color 200ms; 

     -moz-user-select: none; 
     -khtml-user-select: none; 
     -webkit-user-select: none; 
     -o-user-select: none; 
    } 

    input[type=checkbox].labeled-checkbox.icon + label 
    { 
     width: auto; 
    } 

     input[type=checkbox].labeled-checkbox + label > span.labeled-checkbox-unchecked 
     { 
      background: url(../images/checkbox-unchecked.png) no-repeat left center; 
      padding-left: 20px; 
     } 

     input[type=checkbox].labeled-checkbox + label > span.labeled-checkbox-checked 
     { 
      background: url(../images/checkbox-checked.png) no-repeat left center; 
      padding-left: 20px; 
     } 

     input[type=checkbox].labeled-checkbox.icon + label > span.labeled-checkbox-unchecked 
     { 
      display: block; 
      background-position: center; 
      width: 16px; 
      height: 16px; 
      padding-left: 0; 
     } 

     input[type=checkbox].labeled-checkbox.icon + label > span.labeled-checkbox-checked 
     { 
      display: block; 
      background-position: center; 
      width: 16px; 
      height: 16px; 
      padding-left: 0; 
     } 

    input[type=checkbox].labeled-checkbox + label ::selection 
    { 
     background-color: rgba(255, 255, 255, 0); 
    } 

    input[type=checkbox].labeled-checkbox + label ::-moz-selection 
    { 
     background-color: rgba(255, 255, 255, 0); 
    } 

    input[type=checkbox].labeled-checkbox + label:hover 
    { 
     background-color: #EF7896; 
     color: #ffffff; 
    } 
     input[type=checkbox].labeled-checkbox:not(:checked) + label > span.labeled-checkbox-checked 
     { 
      display: none; 
     } 

    /* When Checked */ 
    input[type=checkbox].labeled-checkbox:checked + label 
    { 
     background: #EF7896; 
     color: #ffffff; 
    } 

    input[type=checkbox].labeled-checkbox:checked + label:hover 
    { 
     background-color: #EF7896; 
    } 
     input[type=checkbox].labeled-checkbox:checked + label > span.labeled-checkbox-unchecked 
     { 
      display: none; 
     } 

     input[type=checkbox].labeled-checkbox:checked + label > span.labeled-checkbox-checked 
     { 
      display: inline; 
     } 

     input[type=checkbox].labeled-checkbox.icon:checked + label > span.labeled-checkbox-checked 
     { 
      display: block; 
     } 

#hd-checkbox{ 
float: left; 
font-family: 'Open Sans', sans-serif; 
} 

/* 
    Hide radio button (the round disc) 
    we will use just the label to create pushbutton effect 
*/ 
input[type=radio] { 
    display:none; 
    margin:10px; 
} 

/* 
    Change the look'n'feel of labels (which are adjacent to radiobuttons). 
    Add some margin, padding to label 
*/ 
input[type=radio] + label { 
    display:inline-block; 
    margin:-3px; 
    padding:10px; 
    background:#373737 url('../images/pagination-gradient-x.png') repeat-x; 
    border-color: #ddd; 
    color: #ffffff; 
} 
/* 
Change background color for label next to checked radio button 
to make it look like highlighted button 
*/ 
input[type=radio]:checked + label { 
    background: #EF7896; 
    color: #ffffff; 
} 

label{ 
    cursor:pointer; 
}

這裏是一個codepen鏈接，這樣你就可以檢查：http://codepen.io/anon/pen/xoprg

謝謝

來源

2014-10-20 user3312399

回答

0

該問題源於resultbar未清除。

最簡單的解決將是添加overflow: hidden;到.resultbar

DEMO

.resultbar { 
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #333537), color-stop(100%, #1e1e1f)); 
    background: -moz-linear-gradient(bottom, #1e1e1f 0%, #272729 97.56%, #333537 100%); 
    background: -o-linear-gradient(bottom, #1e1e1f 0%, #272729 97.56%, #333537 100%); 
    background: -webkit-linear-gradient(bottom, #1e1e1f 0%, #272729 97.56%, #333537 100%); 
    background: linear-gradient(bottom, #1e1e1f 0%, #272729 97.56%, #333537 100%); 
    height: 38px; 
    margin-top: 5px; 

    overflow: hidden; 
}

來源

2014-10-20 22:03:50 Turnip

+1

工程就像一個魅力，非常感謝你 – user3312399 2014-10-20 22:09:06

相關問題

 相關問題