#html #css #google-chrome #firefox
#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(amp;quot;imagenespresentacion/<?php echo $random; ?>amp;quot;); background-repeat: no-repeat; background-size: cover;">
-->
<section id="content" style="background-image: url(amp;quot;imagenespresentacion/<?php echo $random; ?>amp;quot;); background-repeat: no-repeat; background-size: cover;">
<!-- <div class="section parallax dark notopmargin noborder" style="padding: 80px 0px; background-image: url(amp;quot;imagesEj/parallax/home/5.jpgamp;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 amp;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. Пожалуйста, объясните, что означает «запутанный», уточните вашу конкретную проблему или добавьте дополнительные сведения, чтобы выделить именно то, что вам нужно. Как написано в настоящее время, трудно точно сказать, о чем вы спрашиваете.
2. ваш id = «content» имеет стиль css «Overflow» =»hidden» на странице style.css.. удалите это, и все будет работать нормально
3. Извините, я разместил ссылку со скриншотом, из-за этого переполнение стека не позволяет размещать изображение напрямую.
4. Картик, это сработало! Теперь фон размещен правильно, однако теперь содержимое немного прокручивается вместе с пользователем, пока не достигнет нижнего колонтитула. Это может быть проблемой свойства position?
5. похоже.. попробуйте поиграть с ним, используя инструмент разработчика, встроенный в Chrome и Firefox
Ответ №1:
Попробуйте добавить:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
Для вашего соответствия css фоновому изображению.