2016-08-23 13 views
1

位置はクロームでの作業が、私は私のデザインで、ブートストラップを使用しています この問題を解決する方法のFirefoxで動作しない固定のFirefoxに取り組んクロムで働いていない固定CSSの位置が

このhtmlコードは固定されている必要があり
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
     <div class="container-fluid"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 

      </div> 
      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
        <li> 
         <a href="index.html">Home</a> 
        </li> 
        <li> 
         <a href="aboutus.html">About Us</a> 
        </li> 
         <li> 
         <a href="services.html">Services</a> 
        </li> 
         <li> 
         <a href="factory.html">Factory</a> 
        </li> 
         <li> 
         <a href="projects.html">Projects</a> 
        </li> 
         <li> 
         <a href="client.html">Clients</a> 
        </li> 
         <li> 
         <a href="video.html">Video</a> 
        </li> 
        <li> 
         <a href="contactus.html">Contact Us</a> 
        </li> 
       </ul> 
      </div> 
      <!-- /.navbar-collapse --> 
     </div> 
     <!-- /.container --> 
    </nav> 
    <div class="row"> 
    <img src="img/logo%20corner.png" class="center-block img-responsive aboutlogo"> 
    </div> 



    <!-- Full Page Image Background Carousel Header --> 
    <header id="myCarousel" class="carousel slide"> 
     <!-- Indicators --> 


     <!-- Wrapper for Slides --> 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <!-- Set the first background image using inline CSS below. --> 
       <div class="fill fills" style="background-image:url('img//intro%203.jpg');"></div> 
       <div class="carousel-caption"> 
        <h1>P-DECO</h1> 
       <p>YOUR PARTNER TO THE TOP </p> 
       </div> 
      </div> 
     </div> 
    </header> 

と私はそれを行うが、それは、クロムやOperaブラウザで動作していないですが、それは完璧な火狐の仕事だ

CSSコード:

.carousel, 
.item, 
.active { 
    height: 65%; 
} 
.carousel-inner { 
    height: 100%; 
} 
/* Background images are set within the HTML using inline CSS, not here */ 
.fill { 
    width: 100%; 
    height:300px; 
    background-position:center ; 
    -webkit-background-size: contain; 
    -moz-background-size: contain; 
    background-size: contain; 
    -o-background-size:contain; 
    background-repeat: no-repeat; background-size: 100% 100%;background-origin: content-box; 
    z-index: 1030; 
    position: fixed; 
} 

クリックそれはChromeとFirefoxの

コンテンツコード

<!-- Page Content --> 
    <div class="container-fluid">  
     <div class="row vcenter"> 
      <div class="col-lg-3 col-md-3 col-sm-3"></div> 
      <div class="col-lg-6 col-md-6 col-sm-6 "> 
       <h1>ABOUT US</h1> 
       <p>P-DECO is a fully integrated design and Wood manufacturing firm that has developed over the years into a regional powerhouse mastering all facets of interior decorations in Wood and Steel With ISO certification . Our team is ready to assist from the initial conceptual design to the turnkey handover, bringing high quality services and delivering the highest standards.</p> 
      </div> 
      <div class="col-lg-3 col-md-3 col-sm-3 "><img src="img/iso.jpg" class="center-block" id="isologo"></div> 
     </div> 

     <hr> 
<div class="row"> 
<div class="col-md-4 col-sm-4 col-lg-4"><img src="img/558967750_442.jpg" class="center-block"></div> 
<div class="col-md-4 col-sm-4 col-lg-4"><img src="img/modern-staircase-oak-wood-interior-design-ideas-home-decoration.jpg" class="center-block"></div> 
<div class="col-md-4 col-sm-4 col-lg-4"><img src="img/slide3.jpg" class="center-block"></div>  
</div> 
     <hr> 

     <div class="row"> 
     <div class="col-md-4 col-sm-4 col-lg-4"></div> 
      <div class="col-md-4 col-sm-4 col-lg-4"><h1>WHO WE ARE </h1></div> 
      <div class="col-md-4 col-sm-4 col-lg-4"></div> 
     </div> 

<div class="row"> 
      <div class="col-lg-3 col-md-3 col-sm-3"></div> 
      <div class="col-lg-6 col-md-6 col-sm-6"> 
       <p>WHO WE ARE 
P-DECO we believe that quality is the basis for success. Providing superior quality of products and timely services based on agreed budgets has made P-DECO a regional leader by adding great value to all projects, leaving our clients with a great level of satisfaction. Through training, synergy and motivation, our highly qualified team is fully dedicated to every assignment, allowing P-DECO to be amongst the best firms in the market. Having an esteemed reputation in the market is what we aim for, and thus with a little faith and confidence in our highly experienced team of engineers the job will be done.</p> 
      </div> 
      <div class="col-lg-3 col-md-3 col-sm-3"></div> 
     </div> 
     <hr> 

     <div class="row"> 
<div class="col-md-4 col-sm-4 col-lg-4"><img src="img/MR.KL%20Faqra-wood%20work%204566333.jpg" class="center-block" ></div> 
<div class="col-md-4 col-sm-4 col-lg-4"><img src="img/blue%20chair.jpg" class="center-block" ></div> 
<div class="col-md-4 col-sm-4 col-lg-4"><img src="img/Table%20support.jpg" class="center-block" ></div>  
</div> 
     <hr> 
     <div class="row"> 
     <div class="col-md-4 col-sm-4 col-lg-4"></div> 
      <div class="col-md-4 col-sm-4 col-lg-4"><h1>OUR VISION</h1></div> 
      <div class="col-md-4 col-sm-4 col-lg-4"></div> 
     </div> 
     <div class="row"> 
      <div class="col-lg-3 col-md-3 col-sm-3"></div> 
      <div class="col-lg-6 col-md-6 col-sm-6"> 
       <p>P-DECO is not about projects, it’s about People. We have an excellent team who share a passion for everything they do: from creative designers to expert project managers, production managers to quantity surveyors, supply chain leaders to health and safety specialists. Our talented people make the difference and systematically exceed expectations. We are proud to be recognized as Investors in People because our people invest so much of themselves in our clients and us. Our people love what they do and the way we do it. We believe our People set us apart giving us the edge to drive our business forward. And they can do the same for you and your business.</p> 
      </div> 
      <div class="col-lg-3 col-md-3 col-sm-3"></div> 
     </div> 
       <div class="row"> 
<div class="col-md-4 col-sm-4 col-lg-4"><img src="img/pic1.jpg" class="center-block" ></div> 
<div class="col-md-4 col-sm-4 col-lg-4"><img src="img/machine%202.jpg" class="center-block" ></div> 
<div class="col-md-4 col-sm-4 col-lg-4"><img src="img/machine%201.jpg" class="center-block"></div>  
</div> 
     <hr> 
+0

の下に追加します。 – frnt

+0

私は5分から変更しましたが、サンさんはここで答えていますが、まだ問題があります。コンテンツには何らかの情報が表示されています – mhmd

+0

見つけた解決策を共有しています。この回答を見てください[ここ](https://stackoverflow.com/questions/44679794/position-fixed-on-chrome-mobile-causing-element-to-move-on-scroll-up-down/#44680066) )そして、 "user-scalable = no"の完全な説明はここにあります(ここではhttps://stackoverflow.com/questions/6397748/whats-the-point-of-meta-viewport-user-scalable-no- in-the-google-maps-api) – Alex

答えて

0

に表示されていますどのようにウェブサイトを参照するにはは、コードとチェック以下のあなたのヘッダーのdivを交換してください。それが動作する場合、インラインスタイルを削除してクラスに配置することができます。

<header style="position: relative;"><div id="myCarousel" class="carousel slide" style=" 
"> 
     <!-- Indicators --> 


     <!-- Wrapper for Slides --> 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <!-- Set the first background image using inline CSS below. --> 
       <div class="fill fills" style="background-image:url('img//intro%203.jpg');"></div> 
       <div class="carousel-caption"> 
        <h1>P-DECO</h1> 
       <p>YOUR PARTNER TO THE TOP </p> 
       </div> 
      </div> 
     </div> 
    </div></header> 

あなたのヘッダーは、両方のブラウザで同じ動作をしますと、私はすべての違いを見つけることができませんでしたCSS

.carousel { 
    position: fixed; 
    width: 100%; 
    z-index: 999; 
} 
+0

いいえ、それはあなたのコードを入れたときに画像のヘッダーがクロムに​​消えるサイトのために上に置いてください。 – mhmd

+0

それは仕事ですが、このコードはあなたの下にいくつかの情報を隠します上記コンテンツのコードを確認することができます – mhmd

+0

隠し情報にはZ-インデックスまたはトップポジションを使用してみてください。 – San