2015-12-11 55 views
0

我正在一个网站www.50s.co上工作,它看起来很不错,但我看起来在Firefox或IE和背景图片大小不同,至少它看起来像他们,但它是说图像大小是同样,页面上的某些元素(s)导致问题,但我看不到任何错误。元素在其他浏览器中调整大小?

我只想让网站看起来像在其他浏览器中的Chrome一样。

是什么导致图像重叠在页面底部的蓝色边框,我该如何解决它? (将加入我们的页面是主要的问题,但其他人做一点点)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

<link rel="icon" type="image/x-icon" href="/images/450fav.jpg"/> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script> 
<script src="jquery.carousel.js" type="text/javascript"></script> 
<link href="jquery.carousel.css" rel="stylesheet" type="text/css" /> 
     <meta name="keywords" content="discount, ariels, air conditioning, airport transfers, auto electricians, bathrooms, beauty salons, bedrooms, blinds, curtains, boilers, brake, clutch, builders, burglar alarms, car body repairs, car hire, carpenters, carpet cleaning, carpet fitting, central heating, chiropodists, chiropractors, cleaning services, domestic appliance repair, double glazing, drains, electricians, estate agents, exausts, fencing, garage doors, garages, garage services, gas, guttering, kitchens, landscaper, gardening, grass cutting, locksmith, locksmiths, mot, mots, painters, decoraters, paving, contractors, pest control, plasterers, plumbers, removal, romavals, storage, roofing, roofer, skip hire, tree surgeon, tree services, tyres, vets, wills, probate writting"> 
<link href="browsers.css" rel="stylesheet" type="text/css"> 
     <script type="text/javascript" async="" src="ga.js"></script><script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> 
     <link rel="stylesheet" href="bootstrap.min.css"> 
     <link href="style.css" rel="stylesheet" type="text/css"> 
     <script src="jquery.min.js"> </script><style type="text/css"></style> 

     <script src="bootstrap.min.js"></script> 
<script src="jquery-1.11.1.min.js" type="text/javascript"></script> 
     <script src="jquery.ui-1.10.4.slider.min.js" type="text/javascript"></script> 
     <link href="css" rel="stylesheet" type="text/css"> 
     <link href="jquery.ui.core.min.css" rel="stylesheet" type="text/css"> 
     <link href="jquery.ui.theme.min.css" rel="stylesheet" type="text/css"> 
     <link href="jquery.ui.slider.min.css" rel="stylesheet" type="text/css"> 
     <script type="text/javascript"> 
      jQuery(document).ready(function($) { 
       /*$(".scroll").click(function(event){  
        event.preventDefault(); 
        $('html,body').animate({scrollTop:$(this.hash).offset().top},900); 
       });*/ 

       $('#change_city').change(function(){ 
        $.post("ajax.php", { city_id: $(this).val() }, function(data) { 
         $("#change_postcode").html(data); 
        }); 
       }); 

       $("#menu_toggle").click(function() { 
        $("#top_menu").toggle(); 
       }); 
      }); 
     </script> 
<meta charset="utf-8"> 
<title>Join 450s</title> 
</head> 

<body> 

<div class="border1"> </div> 
<button type="button" class="navbar-toggle hidden-lg hidden-md hidden-sm" id="menu_toggle" aria-expanded="false"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
</button> 

    <div class="container"> 
     <div class="row"> 
      <div class="col-md-4 col-sm-12 col-xs-12"> 
       <div class="logo"> 
        <a href="http://50s.co"><br><img src="/images/450slogo.png"></a><br> 
       </div> 
      </div> 

      <div class="col-md-8 col-sm-12 col-xs-12"> 
       <nav class="navbar navbar-default pull-right"> 
        <div class="container-fluid"> 


        <!-- Collect the nav links, forms, and other content for toggling --> 
        <div class="collapse navbar-collapse" id="top_menu"> 
         <ul class="nav navbar-nav"> 
         <li><a class="active" href="http://www.50s.co" data-hover="Home">Home</a></li> 
         <li><a href="http://www.50s.co/why.php" data-hover="Why Us?">Why Us?</a></li> 
         <li><a href="http://www.50s.co/offers.php" data-hover="Offers">Offers</a></li> 
         <li><a style="color:#E31818" href="http://www.50s.co/advertise.php" data-hover="Advertise">Join Us</a></li> 
         <li><a href="http://www.50s.co/contact.php" data-hover="Contact Us">Contact Us</a></li> 
         </ul> 
        </div><!-- /.navbar-collapse --> 
        </div><!-- /.container-fluid --> 
       </nav> 
      </div> 
     </div> 
     <div id="Slider1"></div> 
    </div> 


<div class='border2'> </div> 
<div style="position:relative;width:100%;"><img class="advertise1" style="position:absolute;width:100%;border-radius:0px;" src="images/advertise1.png"/></div> 
<div><img class="advertise2" style="position:absolute;width:100%;border-radius:0px;" src="images/advertise2.png"/></div> 

     <div class="container"> 

      <div class="row"> 

       <div class="col-sm-12 col-xs-12 col-md-6 box1">  
        <div class="box-wrap"> 

<h1 class="title1" style="font-family:'arial';text-align:center;margin-top:2%;">Join 450s</h1> 

<h4 class="heading1" style="font-family:'arial';padding:0px;text-align:center;"><p>Reasons to offer a discount to people over 50:</p></h4> 
<h4><ul type="circle"> 
<li>64.1 million people live in the United Kingdom.</li><br> 
<li>43% or 21.6 million people in the UK are over 50 years old.</li><br> 
<li>14,226 people turn 50 every week.</li><br> 
<li>People over 50 control 80% of private wealth.</li><br> 
<li>The 50 plus generation is the fastest growing group of internet users.</li><br> 
<li>The number of 50 plus people using the internet has increased by 80% since 2002.</li><br> 
<li>Not all people over 50 are wealthy.</li><br> 
<li>Pensioners genuinely need such discounts from private businesses.</li><br> 

<li>All online lead service providers are fee based, at an average of 35+ Pounds per lead, 
which they sell 3 times over and put you in a price war with your competition.</li><br> 

<li>We offer exclusive leads, all over 50 year olds</li><br> 
<li>No price war, No Monthly fees</li><br> 
<li>No Cost per Refferal, Direct contact with the client</li><br> 
<li>No third party referrals, Payment options </li><br> 
</ul></h4> 
<h3 class="heading2" style="font-family:'arial';padding:5px;text-align:center;">Call Today for the Best Exclusive Leads in your area!</h3> 

<strong><h2 class="heading1" style="font-family:'arial';text-align:center;">Call Now On: 0207 078 4229</h2></strong><br> 

</div> 
</div> 
</div> 
</div> 

<div style='margin-top:3%;' class='border2'> </div> 

     <img style=" 
    max-width: 100%; 
    height: auto; 
    width: auto\9; 
    position:relative; clear:bottom; 
display:block;margin-right:auto;margin-left:auto;" src="images/standards.jpg" />   



</body> 
</html> 

Blockquote

+1

请发布代码 – AVI

回答

0

你已经在那里绝对定位的图像作为“背景”图像(但在img标签!)。这确实没有道理 - 绝对定位的元素不会自动调整其大小。 将图像定义为应包含的元素的真实背景图像:background: url(…) …,包含您需要的尺寸,附件和重复设置。

+0

谢谢,它确实让我想起了它的背景,可能应该只是试了一下。 –

相关问题