我有一个页面，我在其中添加了模式。现在页脚将不会显示灰色背景。此问题不影响其他页面。一切正常。唯一的挑战是不显示背景图像。
|| 左侧镀铬 || --------------------------------------- || 火狐在右边||
链接是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>™</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>™</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>™</sup>, Lava<sup>™</sup> Ultimate and BruxZir<sup>®</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>™</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>™</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">×</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>