Что может заставить элемент правильно отображаться в Firefox, но не в Chrome или Safari?

Question

Что может заставить элемент правильно отображаться в Firefox, но не в Chrome или Safari?

0

У меня есть страница, на которой я добавил модалы. Теперь нижний колонтитул не отображает серый фон. Эта проблема не влияет на другие страницы. И все работает нормально. Единственная проблема заключается в том, что фоновое изображение не отображается.

|| Chrome слева || --------------------------------------- || Firefox справа ||

Ссылка: http://www.ios3d.com/dental-equipment/dental-mill.aspx

Раньше у меня была эта ошибка, и мне не хватало закрывающего div. Я бросил div перед нижним колонтитулом, и именно тогда я помню, что он исправлен для Firefox, который, как я знаю, небрежный, но он должен быть функциональным, пока я рефакторинг.

Код для этой страницы:

<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8" />
  <!-- Set the viewport width to device width for mobile -->
  <meta name="viewport" id="view" content="width=device-width minimum-scale=1, maximum-scale=1" />
  <title>Dental Mill - Open Source Dental Milling Unit</title>
  <meta name="keywords" content="dental mill, milling unit, dental equipment, milling unit, milling solution" />
  <meta name="Description" content="The TS150 dental mill is a fast, efficient and affordable open-source milling unit featuring a powerful air-driven 150,000 RPM spindle." />
<!-- Styles and Scripts
================================================ -->
<!--#include file="/_includes/template/head-styles-scripts.html" -->  
  <link rel="stylesheet" href="/stylesheets/orbit-1.2.3.css"> 
  <script type="text/javascript" src="/javascripts/jquery.orbit-1.2.3.js"></script> 
  <!--[if IE]>
    <style type="text/css">
      .timer { display: none !important; }
      div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
    </style>
  <![endif]-->
  <link href="http://www.glidewelldental.com/apps/InteractiveAnimation/css/style.css" rel="stylesheet" />

  <style>
    #iama-1 { width: 80%; max-width: 1000px; margin: 20px auto; border: 2px solid #444; }
    @media only screen and (max-width : 1250px) { #iama-1 { width: 90%; } }
    @media only screen and (max-width : 500px) { #iama-1 { width: 100%; margin: 20px 0; border: none; border-top: 2px solid #444; border-bottom: 2px solid #444; } }

    .nav-button p { color: #fff; }
    @media only screen and (max-width : 767px) { #millDemo { display: none; } }
  </style>
  <!--[if lt IE 9]>
    <script src="http://www.glidewelldental.com/applications/Glidewell.HTML5/js/html5shiv.js"></script>
    <script src="http://www.glidewelldental.com/applications/Glidewell.HTML5/js/respond.js"></script>
  <![endif]-->
  <script>
    function preload(arrayOfImages) {
      $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
      });
    }
    preload([
      '/images/products/mill/slider/dentist.jpg',
      '/images/products/mill/slider/side.jpg',
      '/images/products/mill/slider/before.jpg',
      '/images/products/mill/slider/after.jpg',
      '/images/products/mill/slider/radio.jpg'
    ]);
  </script>

  <!-- Run the plugin -->
  <script type="text/javascript">
    $(window).load(function() {
      $('#featured').orbit();
    });
  </script>
</head>
<body onload="initialize()">
<!-- Header
================================================ -->
<!--#include file="/_includes/template/header.html" -->  

<!-- Region 3 Wrap -->
  <div class="container region3wrap">  
    <!-- Content Top -->  
    <div class="row content_top">
      <div class="nine columns">
        <ul class="breadcrumbs">
          <li><a href="/dental-scanning/index.aspx" title="Dental Scan Solution">IOS Solution</a></li>
          <li class="current"><a href="/dental-equipment/dental-mill.aspx" title="Dental Mill Solution">TS150 Milling Solution</a></li>
        </ul>
      </div>
    </div>
    <!-- End Content Top -->
  </div>
<!-- End Region 3 Wrap -->


<!-- Region 4 Wrap -->
  <div class="container region4wrap">
    <div class="row maincontent">    
      <div class="twelve columns">
        <div class="page_title">      
          <div class="row">   
            <div class="twelve columns">
              <h1>TS150<sup>&trade;</sup> In-Office Milling Solution</h1><br>  
              <h2>Affordable Same-Day Dentistry</h2>
            </div>
          </div>      
        </div><!-- end of page_title-->
      </div>
      <!-- Main Content -->      
      <div class="eight columns">

        <!-- Begin Article -->
        <div class="row">    
          <div class="twelve columns"> 
            <p style="font-size: 1.3em;">
              The TS150<sup>&trade;</sup> Mill provides convenient milling that could reduce your turnaround time to fewer than three hours. The TS150 is a fast, efficient and affordable open-source milling unit featuring a powerful air-driven 150,000 RPM spindle. Its orbital precision milling strategy provides excellent marginal integrity. Use the TS150 to mill materials such as Obsidian<sup>&trade;</sup>, Lava<sup>&trade;</sup> Ultimate and BruxZir<sup>&reg;</sup> Solid Zirconia.
            </p>  

            <div id="millDemo">
              <a href="#" data-reveal-id="millAnimation">
                <img src="/images/products/mill/watchdemo.jpg" />
              </a>   
            </div>

          </div>   
        </div>
        <!-- End  Article -->   

        <!-- Begin Article -->
        <div class="row">         
          <div class="twelve columns">     
            <div class="article_content">  

              <!-- Main Slider --> 
              <div id="cbp-fwslider" class="cbp-fwslider">
                <ul>
<!-- // // // // // // // // // // -->          
                  <li><div><img src="/images/products/mill/slider/dentist.jpg" alt="Dental Mill restorations right in your office" title="Dental Mill restorations right in your office" /></div></li>
<!-- // // // // // // // // // // -->          
                  <li><div><img src="/images/products/mill/slider/side.jpg" alt="Same-day, precise milling from your digital impression" title="Same-day, precise milling from your digital impression"/></div></li>
<!-- // // // // // // // // // // -->          
                  <li><div><img src="/images/products/mill/slider/before.jpg" alt="Pre-operative photo of tooth to be restored" title="Pre-operative photo of tooth to be restored"/></div></li>
<!-- // // // // // // // // // // -->          
                  <li><div><img src="/images/products/mill/slider/after.jpg" alt="Obsidian crown milled in under 20 minutes" title="Obsidian crown milled in under 20 minutes"/></div></li>
<!-- // // // // // // // // // // -->          
                  <li><div><img src="/images/products/mill/slider/radio.jpg" alt="Radiograph shows crown seated with excellent marginal integrity" title="Radiograph shows crown seated with excellent marginal integrity" /></div></li>
<!-- // // // // // // // // // // -->          
                </ul>
              </div> <!-- end of cbp-fwslider -->
              <!-- End Main Slider -->

            </div> <!-- end article_content -->  
          </div> <!-- end twelve columns-->
        </div> <!-- end row -->
        <!-- End  Article -->   

        <!-- Begin Article -->
        <div class="row" id="materials">    
          <div class="twelve columns">
            <hr>   
          </div>  

          <div class="twelve columns">
            <h2 class="article_title">Materials</h2>        
          </div>  

          <div class="twelve columns textCenter">
            <img src="/images/products/mill/blocks.png" alt="blocks">
          </div>  

          <div class="six columns">
            <img src="/images/logos/obsidian.gif" alt="obsidian">
            <hr>
            <p>Obsidian<sup>&trade;</sup> lithium silicate ceramic is a new glass ceramic material indicated for the fabrication of full-contour crowns, 3-unit anterior bridges, veneers, inlays and onlays. Unlike layered ceramic or porcelain-fused-to-metal restorations, Obsidian ceramic restorations are resistant to chipping due to their monolithic composition and average flexural strength of 373 MPa.</p>
            <ul>
              <li>Exceeds the strength requirements for cemented all-ceramic restorations and can also be bonded when desired</li>
              <li>Resists chipping compared to a layered ceramic or PFM restoration</li>
              <li>Available in all VITA Classical and Bleached shades</li>
            </ul>
            <a href="http://www.glidewelldental.com/dentist/services/all-ceramics-obsidian.aspx" target="_blank" class="button small icon-chevron-right">More Info</a>  
          </div> <!-- end six columns-->

          <div class="six columns">           
            <img src="/images/logos/3m.gif" alt="3m">
            <hr>
            <p>Lava<sup>&trade;</sup> Ultimate Restorative is a resin nano ceramic material that offers amazing esthetics, strength and unique functionality. The impressive durability of resin nano ceramic CAD/CAM material results from its high flexural strength and fracture toughness. Nanotechnology on the inside means a beautiful, long-lasting polish on the outside.</p>
            <ul> 
              <li>Less wear to opposing dentition than glass ceramics</li>
              <li>Absorption of chewing forces which reduces stress</li>
              <li>Fast, no firing and easy to mill</li>
            </ul>
            <a href="http://solutions.3m.com/wps/portal/3M/en_US/3M-ESPE-NA/dental-professionals/products/category/digital-materials/lava-ultimate/" target="_blank" class="button small icon-chevron-right">More Info</a>  
          </div> <!-- end six columns-->

        </div> <!-- end row -->

        <!-- Begin Article -->
        <div class="row">    
          <div class="twelve columns">
            <hr>   
          </div>  
          <!-- Mill Video -->       
          <div class="row">    
            <div class="twelve columns">
              <h4 class="video_title">IOS FastDesign Tutorial: Milling the Restoration with the TS-150 Chairside Mill</h4>          
            </div>  
            <!-- Video -->  
            <div class="twelve columns video_container">                 
              <iframe style="scrolling:no; frameborder:0; background-color: transparent;" id="video-player" src="http://www.glidewelldental.com/applications/glidewell.video/embed.aspx?id=IOSFD5&poster=assets/ios-fastdesign-tutorial-milling-the-restoration-with-the-ts-150-chairside-mill.jpg" align="top" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>    
            </div>
            <!-- end of Video -->  
          </div>
        <!-- end of Mill video-->          
        </div>
        <!-- End  Article -->  
      </div>
      <!-- End Main Content -->


      <!-- Sidebar Left -->
      <div class="four columns sidebar-right">  
        <div id="sidebar-product-image" class="sidebar-widget">                  
          <h3>TS150 Mill</h3>                                
          <img src="/images/products/mill360.jpg" alt="Dental Mill" title="Dental Mill"/>
        </div>
        <!-- product links and Call to action
        ================================================ -->
        <!--#include file="/_includes/template/product-pages/product-links-contact-rep.html" -->  
      </div> 
      <!-- End Sidebar Right -->                     
    </div> <!-- end row-->
<!-- // // // // // // // // // // -->
    <div class="row">
      <div class="twelve columns">
        <hr/>
      </div>
    </div>
<!-- // // // // // // // // // // -->       
  </div>
<!-- End Region 4 Wrap -->



</div> <!-- added to test -->

<!-- Footer
================================================ -->
<!--#include file="/_includes/template/footer.html" -->  



<!-- Back To Top -->
  <a href="#" class="scrollup">Scroll</a>
<!-- End Back To Top -->
<!-- Initialize JS Plugins -->
  <script type="text/javascript" src="/javascripts/jquery.tipsy.min.js"></script>
  <script type="text/javascript"  src="/javascripts/jquery.touchSwipe.min.js"></script>
  <script src="/javascripts/app.js"></script>
  <script src="/_includes/analytics/google-analytics.js"></script>


<!-- For Animation of the Milling Machine
================================================ -->
<div id="millAnimation" class="reveal-modal twelve columns" style="background-image: none; background-attachment: scroll; width: 90%; padding: 30px; top: 100px; margin-left: -45%;">
  <div id="iama-1" class="iama-context">
    <div class="container"></div>
    <nav>
      <p class="menu-button">Menu</p>
      <ul></ul>
    </nav>
  </div>
  <a class="close-reveal-modal">&#215;</a>
</div> 

<script src="http://www.glidewelldental.com/apps/InteractiveAnimation/js/build.iama.0.1.0.js"></script>
<script>
  var iamaConfig = {
    data : '/json/animation.js',
    context : $('#iama-1')
  };
</script>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/javascripts/jquery.cbpFWSlider.min.js"></script>
<script>
  $( function() {
  /*
  - how to call the plugin:
  $( selector ).cbpFWSlider( [options] );
  - options:
  {
  // default transition speed (ms)
  speed : 500,
  // default transition easing
  easing : 'ease'
  }
  - destroy:
  $( selector ).cbpFWSlider( 'destroy' );
  */
  $( '#cbp-fwslider' ).cbpFWSlider();

  } );
</script>


</body>
</html>

JGallardo 26 окт. 2013, в 03:46

Источник

Теги:

javascript

html

css

google-chrome

safari

1 ответ

Ещё вопросы

Cameron Askew · Accepted Answer · 2013-10-25T23-16-00.000Z

Safari и Chrome используют WebKit, Firefox - нет.

У вас есть атрибут css, определенный для всех элементов:

*
{
    ....
    -webkit-backface-visibility: hidden;
    ....
}

Это вызывает вашу проблему. Если вы удалите этот атрибут, он исправит вашу проблему, но я не уверен, есть ли другая причина, по которой у вас есть этот атрибут, и поэтому я не уверен, что это приведет к другим проблемам.

Другое исправление - попытаться перезаписать это только для необходимых элементов. Я заметил, играя вокруг, что вы можете сделать это, просто добавив этот css в тело:

body
{
    -webkit-backface-visiblity: visible !important;
}

Однако, поскольку тело лежит в основе большинства ваших HTML-элементов, это также может быть навязчивым. И это еще более навязчиво, если этот css делится на несколько файлов. Если это так, вы можете добавить класс в тело, а затем сделать что-то вроде..

body.backface_visible
{
    -webkit-backface-visibility: visible !important;
}

Хороший улов. Я провел некоторое время, глядя на это, но не мог видеть это.
Только что отредактированный ответ, сначала был неправильный div; p
На самом деле, я не думаю, что это даже так. Это свойство * . встряхивает кулак при проверке элемента в style.css: *{margin:0;padding:0;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-backface-visibility:hidden;zoom:0}
Правда, но если вы хотите просто удалить его для этого div, вы можете просто переопределить его для одного div ... пытался быть ненавязчивым к остальной части его css
Хорошо, мне нравится это редактирование.
Спасибо @CameronAskew, но не уверен, где я мог применить это неправильно. Как вы можете видеть на этом скриншоте , я применил этот класс, но нижний колонтитул все еще не отображается как серый в Safari или Chrome.
@ChristianTernus, спасибо за вклад. Вы предлагаете добавить этот код?
@JGallardo Вы правы, недостаточно просто добавить этот класс CSS - я отредактирую свой ответ через несколько минут, чтобы он был более правильным и законченным.
@CameronAskew Вы можете сделать это с !important , я считаю.
@ChristianTernus, к сожалению, это все еще не работало. Я бросил в линейном стиле с соответствующим цветом в то же время.
Хм, я удивлен - исправление Кэмерон помогло мне с помощью инспектора.
@ChristianTernus Да, это исправляет, потому что он удаляет атрибут из * (или всех элементов). Но если он просто удален из div и все еще применяется к телу, он все равно не будет отображаться правильно.
@CameronAskew, хорошо, что исправили это для Safari. Но не хром. Поэтому я попробовал предложение, которое было в вашем ответе ранее и применимо !important и сейчас работает. Я буду использовать его до рефакторинга, чтобы понять, почему эта страница была затронута.