【发布时间】：2016-01-25 04:10:27
【问题描述】：
我有我的网站，它正在运行，看起来像这样。
但是当我将 100% 缩小到 25% 时，它看起来像这样。
应该是哪里出了问题？？？并且它在 Firefox 中可以很好地缩小，但在 chrome 中出现问题......我正在使用引导程序，滑块是轮播。我的 html 用于菜单所在的标题。
<body>
<!-- header-section-starts -->
<div class="home">
<a href="index.php"><span class="glyphicon glyphicon-home"></span></a>
</div>
<div class="header-top">
<div class="social-icons">
<a href="https://www.facebook.com/Jacklin-Leather-Pvt-Ltd-1661694880710794" target="_blank"><i class="facebook"></i></a>
<a href="https://www.twitter.com/divyjesadiya" target="_blank"><i class="twitter"></i></a>
<a href="https://plus.google.com/+DivyeshJesadiya" target="_blank"><i class="googlepluse"></i></a>
</div>
<span class="menu"><img src="images/nav.png" alt=""/></span>
<div class="top-menu">
<ul>
<nav class="cl-effect-13">
<li><a href="about.php" id="about">About</a></li>
<li><a href="product.php" id="product">Products</a></li>
<li><a href="showroom.php" id="showroom">E-Showroom</a></li>
<li><a href="contact.php" id="contact">Contact Us</a></li>
<li><a href="typography.php" target="_blank" id="typo">E-Catalog</a></li>
</nav>
</ul>
</div>
<!-- script for menu -->
<script>
$( "span.menu" ).click(function() {
$( ".top-menu ul" ).slideToggle( 300, function() {
// Animation complete.
});
});
</script>
<!-- //script for menu -->
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<!-- header-section-ends -->
滑块是。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div data-example-id="simple-carousel" class="bs-example">
<div data-ride="carousel" class="carousel slide" id="carousel-example-generic">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carousel-example-generic"></li>
<li data-slide-to="1" data-target="#carousel-example-generic"></li>
<li data-slide-to="2" data-target="#carousel-example-generic"></li>
<li data-slide-to="3" data-target="#carousel-example-generic"></li>
</ol>
<div role="listbox" class="carousel-inner">
<div class="item active">
<img alt="im1" src="images/slide/im1.jpg"
data-holder-rendered="true">
</div>
<div class="item">
<img alt="im2" src="images/slide/im2.jpg"
data-holder-rendered="true">
</div>
<div class="item">
<img alt="im3" src="images/slide/im3.jpg"
data-holder-rendered="true">
</div>
<div class="item">
<img alt="im4" src="images/slide/im4.jpg"
data-holder-rendered="true">
</div>
</div>
<a data-slide="prev" role="button" href="#carousel-example-generic" class="left carousel-control">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a data-slide="next" role="button" href="#carousel-example-generic" class="right carousel-control">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
而标题的 css 是。
.home{
float:left;
width:20%;
background: #22292F;
padding: 1.44em 1em;
position: relative;
}
span.glyphicon.glyphicon-home {
margin-top: -6px;
font-size: 21px;
color: #fff;
float: right;
}
.top-menu{
float:left;
margin-top:9px;
}
.cl-effect-13 a {
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
transition: color 0.3s;
}
.cl-effect-13 a::before {
position: absolute;
top: 20%;
left: 50%;
color: transparent;
content: '.';
text-shadow: 0 0 transparent;
font-size: 1.2em;
-webkit-transition: text-shadow 0.3s, color 0.3s;
-moz-transition: text-shadow 0.3s, color 0.3s;
transition: text-shadow 0.3s, color 0.3s;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
pointer-events: none;
}
.cl-effect-13 a:hover::before,
.cl-effect-13 a:focus::before {
color: #0078B5;
text-shadow: 10px 0 #fff, -10px 0 #fff;
}
.cl-effect-13 a:hover,
.cl-effect-13 a:focus {
color: #FFFFFF;
}
/* Effect 14: border switch */
.cl-effect-14 a {
padding: 0 20px;
height: 45px;
line-height: 45px;
}
.social-icons{
float:right;
margin-right: 22%;
}
.social-icons i{
width:35px;
height:35px;
background: url('../images/img-sprite.png') no-repeat 0px 0px;
display:inline-block;
cursor:pointer;
}
.social-icons i:hover {
opacity: 0.5;
}
i.facebook{
background-position:0px 0px;
}
i.twitter{
background-position:-40px 0px;
}
i.googlepluse{
background-position:-80px 0px;
}
.top-menu ul li{
display:inline-block;
}
.top-menu ul li a{
color:#fff;
font-weight:400;
font-size:22px;
text-decoration:none;
margin:-5px 15px;
font-family: 'Myriad ProPoP', times, sans-serif;
}
@media (max-width: 1200px) {
.top-menu ul li a{
font-size:18px;
margin:0 15px;
}
}
@media (max-width: 992px) {
.top-menu ul li a{
font-size:18px;
margin:0 8px;
}
}
.top-menu ul li a:hover{
color: #0078B5;
}
.top-menu ul li a.active{
color: #0078B5;
}
.header-top {
background: #22292F;
padding: .5em 15px;
float: left;
width: 80%;
position: relative;
}
请帮帮我。
【问题讨论】：
标签： html css twitter-bootstrap google-chrome