在firefox和chrome中查看我的网页时出现的问题

时间:2016-10-13 14:18:50

标签: html css google-chrome firefox

我终于完成了我的网页。它在Google Chrome中完美运行。但是,我决定检查它在Firefox上的显示方式,它完全混乱1。你可以在http://164.132.103.92/看到它(如果你使用chrome,它会被看到没问题,如果你使用firefox,你会看到它搞砸了。

我使用bootstrap。这是我的索引代码:(省略脚本)

<!DOCTYPE html>
<html dir="ltr" lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="author" content="SemiColonWeb" />
        <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
        <meta http-equiv="Pragma" content="no-cache" />
        <meta http-equiv="Expires" content="0" />

        <!-- Stylesheets
        ============================================= -->
        <link href="http://fonts.googleapis.com/css?family=Lato:300,400,400italic,600,700|Raleway:300,400,500,600,700|Crete+Round:400italic" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
        <link rel="stylesheet" href="style.css" type="text/css" />
        <link rel="stylesheet" href="css/swiper.css" type="text/css" />
        <link rel="stylesheet" href="css/dark.css" type="text/css" />
        <link rel="stylesheet" href="css/font-icons.css" type="text/css" />
        <link rel="stylesheet" href="css/animate.css" type="text/css" />
        <link rel="stylesheet" href="css/magnific-popup.css" type="text/css" />
        <link rel="stylesheet" href="css/responsive.css" type="text/css" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <!--[if lt IE 9]>
            <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
        <![endif]-->

        <!-- Document Title
        ============================================= -->
        <title>Buscador de imagenes</title>
        <style type="text/css">
            a:hover {
                color: white;
            }
            .button.button-border:hover {
                background-color: white;
                text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
                color: grey !important;
            }
            .image-controlled {
                position: relative; 
                background-size: contain;
            }
            #autor{
                font-weight: bold !important;
            }
        </style>
    </head>
    <body class="stretched">
        <!-- Document Wrapper
        ============================================= -->
        <div id="wrapper" class="clearfix">
            <!-- Header
            ============================================= -->
            <header id="header" class="full-header">
                <div id="header-wrap">
                    <section id="page-title">
                        <div class="container clearfix">
                            <div  style="width:690px;">
                                <h2 style="display: inline; font-size: 180%">LA PINTURA DEL SIGLO XIX EN EL MUNDO OCCIDENTAL
                                <br>
                                <br>
                                ARCHIVO DE IMÁGENES</h2><h1 class="pull-right" style="display: inline; font-weight:normal;"><strong>AI </strong>XIX</h1>
                            </div>
                            <ol class="breadcrumb">
                                <br>
                                <br>
                                <br>
                                <li><a href="#">Presentación</a></li>
                                <li><a href="#">Sobre el autor</a></li>
                                <li><a href="contacto.php">Contacto</a></li>
                            </ol>
                        </div>
                    </section>
            </header><!-- #header end -->
            <!-- Content
            ============================================= -->

                <?php
                include("funciones.php");
                $link=conectar();
                $link->set_charset("utf8");
                $random = mt_rand(1, 75);
                ?>
            <!--<div class="image-controlled">

            <img src="imagenespresentacion/<?php echo $random; ?>.jpg";  id="full-screen-background-image" >
            <img src="imagenespresentacion/<?php echo $random; ?>.jpg"; width: cover;>

                    <section id="content" style="background-image: url(&quot;imagenespresentacion/<?php echo $random; ?>&quot;); background-repeat: no-repeat; background-size: cover;">


            -->
            <section id="content" style="background-image: url(&quot;imagenespresentacion/<?php echo $random; ?>&quot;); background-repeat: no-repeat; background-size: cover;">


            <!--    <div class="section parallax dark notopmargin noborder" style="padding: 80px 0px; background-image: url(&quot;imagesEj/parallax/home/5.jpg&quot;); background-position: 50% -92.4px;" data-stellar-background-ratio="0.4">
                -->
                <div class="container">
                    <div class="row">
                        <div class="section parallax white col-md-2" style="width: 132px; padding-top: 100px; padding-right: 0px; margin-right: 0; left:100;">
                            <p>

                                <label style="color: white;" for="pais">Paises</label><br>
                                <select name="pais" id='pais' size="10" onchange='cargarSelect2(this.value);'>
                                    <option value='0'>Selecciona un pais</option>
                                    <?php 
                                        $sql="SELECT * FROM pais";
                                        $result = mysqli_query($link, $sql);
                                        $i=1;
                                        $arrayAutoresT= array();
                                        while($row = mysqli_fetch_row($result)){ 
                                            $idP=$row[0];
                                            echo '<option value="'.$i.'">'.$row[1].'</option>'; 
                                            $i++;
                                            $sql1 = "SELECT * FROM autor WHERE ID_Pais='$idP' Order by nombre ASC";
                                            $result1 = mysqli_query($link, $sql1);
                                            //recorremos el pais sacando autores
                                            while($row1 = mysqli_fetch_row($result1)){ 
                                                $temp=array("idPais" => $idP, "nAutor" => $row1[1], "idAutor" => $row1[0]);
                                                $arrayAutoresT[]=$temp;
                                            }
                                        }
                                    ?> 
                                </select>
                            </p>
                        </div>
                        <div class="section parallax white col-md-2" style="width: 333px; padding-top: 100px; padding-left: 0px; background-position: 50% -92.4px;" data-stellar-background-ratio="0.4">
                            <p>
                                <label style="color: white;" for="autor">Autores</label><br>
                                <select name="autor" id='autor' size="10" onchange='seleccinado_select2();' disabled>
                                    <option value='0'>Selecciona un autor</option>
                                </select>
                            </p>

                        </div>
                        <div class="clearfix center col-md-8" style="padding-left: 10px; width: 700px;">
                            <div class="emphasis-title" >
                            <br>
                            <br>
                            <br>
                            <br>
                            <br>
                            <br>
                                <!--<h2>Buscador de autores</h2>-->
                                <Form Name ="form" Method ="POST" ACTION = "imagen.php">
                                    <p class="lead topmargin-sm" style="color: white;">Introduce el ID o el nombre del autor que deseas buscar</p>
                                    <div class="input-group">
                                        <div class="input-group-addon"><i class="icon-line-search"></i></div>
                                        <input id="icons-filter" class="form-control" value="" placeholder="ID o nombre del autor a buscar" type="text" name="id">
                                    </div>
                                    <a href="comparador_index.php" style="color">Comparar dos autores</a>
                                    <br>
                                    <br>
                                    <INPUT class="button button-xlarge button-border button-rounded tright" style="margin-top: 2%; color:white; border-color:white;" TYPE = "Submit" Name = "enviar" VALUE ="Buscar">
                                    </INPUT>

                                </Form>


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

            </section>
            <!--</img>
            </div>-->


            <!-- Footer
            ============================================= -->
            <footer id="footer" class="white">
                <!-- Copyrights
                ============================================= -->
                <div id="copyrights">
                    <div class="container clearfix">
                        Copyrights &copy; 2016 Todos los derechos reservados<br>
                        <div class="copyright-links"><a href="#">Aviso legal</a> / <a href="#">Política de privacidad</a></div>
                    </div>

                    </div>

                </div><!-- #copyrights end -->

            </footer><!-- #footer end -->

        </div><!-- #wrapper end -->

        <!-- Go To Top
        ============================================= -->
        <div id="gotoTop" class="icon-angle-up"></div>
    </body>
</html>

1 个答案:

答案 0 :(得分:0)

尝试添加:

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;

给你的背景图片css propriety。