0
부트 스트랩이있는 정적 웹 사이트를 구축 중입니다. 웹, Safari OK에 배포 할 때 로컬 레이아웃에서 작업하는 것이 좋지만 Chrome 및 Firefox는 몇 가지 부트 스트랩 CSS 규칙을 지원하지 않거나 잘못된 것을 수행하는 것처럼 보입니다.Chrome 및 Firefox가 Safari와 다른 부트 스트랩 CSS를 렌더링하는 이유
사파리 OK 
크롬 KO 
라이브 코드 : (인증서를 수락해야합니다) https://canales.paperplane.io/
코드 (index.html을)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Canales Auty</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<!-- #Header -->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10"><a href="index.html"><img src="img/header.png"></a></div>
<div class="col-md-1"></div>
</div>
<!--Navbar-->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<div class="navbar navbar-default">
<div class="container">
<div class= "navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="about.html">ABOUT THE FIRM</a></li>
<li><a href="professionals.html">PROFESSIONALS</a></li>
<li><a href="practice_areas.html">PRACTICE AREAS</a></li>
<li><a href="news.html">NEWS ROOM</a></li>
<li><a href="careers.html">CAREERS</a></li>
<li><a href="index.html">CONTACT US</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-1"></div>
</div>
<!--Mosiaco -->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-4">
<img id="d1" src="img/mosaico_1.png">
<div class="contenthover container">
<h3>Lut</h3>
<p>Hola soy Lut!</p>
<p><a href="#" class="btn btn-success mybutton">Lorem ipsum</a></p>
</div>
</div>
<div class="col-md-3">
<img id="d2" src="img/mosaico_2.png">
<div class="contenthover container">
<h3>Lut</h3>
<p>Hola soy 2!</p>
<p><a href="#" class="btn btn-success mybutton">Lorem ipsum</a></p>
</div>
<img src="img/mosaico_3.png">
</div>
<div class="col-md-3"><img src="img/mosaico_4.png"><img src="img/mosaico_5.png"><img src="img/mosaico_6.png"></div>
<div class="col-md-1"></div>
</div>
<div class="row">
<div class="col-md-12 footer">
<p>hola</p>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/contentHover.js"></script>
<script type="text/javascript">
$('document').ready(function(){
$('#myTootTip').tooltip();
$('#myPopOver').popover();
$('#d1').contenthover({
overlay_background:'#000',
overlay_opacity:0.8
});
$('#d2').contenthover({
overlay_background:'#000',
overlay_opacity:0.8
});
});
</script>
</body>
</html>
두 개의 버튼이 어디에 위치해야합니까? Safari 스크린 샷에는 그 중 하나가 표시되지 않습니다. – enhzflep
"모자이크"위로 마우스를 가져 가면 나타납니다. Safari의 라이브 사이트 https://canales.paperplane.io/를 살펴보십시오. 문제는 jQuery 플러그인과 관련이 있다고 생각합니다. – Lut
실제로 내 질문에 답하지 않았습니다. 나는 그들이 나타나면 ** 묻지 않았다 **. 나는 그들이 어디에 나타나는지 물었다. 크롬과 함께 이미 귀하의 링크를 보았습니다. 나는 사과에서 탄수화물과 비타민을 제외하고 아무것도 설치하려고하지 않습니다. 언제나 그렇듯이 다른 사람들이 쉽게 제공 할 수있게되면 더 나은 도움을 얻을 수 있습니다. – enhzflep