Css Safari忽略最大宽度规则_Css_Responsive Design_Safari

Css Safari忽略最大宽度规则

css responsive-design safari

Css Safari忽略最大宽度规则,css,responsive-design,safari,Css,Responsive Design,Safari,除了safari之外，我有一个很好的徽标，它完全忽略了分配给徽标的CSS。我试着把大众车改成%但也被忽略了。我尝试了各种不同的显示和定位排列，但都没有用——我在同样多的时间里重建了这个标题部分3次，试图找到问题，虽然没有什么可显示的，但咖啡账单更高。你们能不能花点时间帮我找出哪里出了问题 <!DOCTYPE html> <html lang="en"> <head> <link href='http://fonts.googleapis.com/

除了safari之外，我有一个很好的徽标，它完全忽略了分配给徽标的CSS。我试着把大众车改成%但也被忽略了。我尝试了各种不同的显示和定位排列，但都没有用——我在同样多的时间里重建了这个标题部分3次，试图找到问题，虽然没有什么可显示的，但咖啡账单更高。你们能不能花点时间帮我找出哪里出了问题

<!DOCTYPE html>
<html lang="en">
<head>
    <link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Welcome </title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://waywarddesignco.com/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://waywarddesignco.com/css/style.css">
    <link rel="icon" type="image/png" href="http://waywarddesignco.com/wp-content/uploads/2015/04/favicon.png">
    <script src="http://waywarddesignco.com/js/jquery.min.js"></script>
    <script src="http://waywarddesignco.com/js/bootstrap.min.js"></script>

</head>

<body class="bkg_img img-responsive" background="http://waywarddesignco.com/wp-content/uploads/2015/04/background.jpg">

    <div id="container">
    <div id="xsg" class="visible-xs">
    </div>

            <div class="logo hidden-xs">
                <a href="http://waywarddesignco.com">
                    <img src="http://waywarddesignco.com/wp-content/uploads/2015/04/logo_final_png.png" class="hvr-pulse img-responsive">
                </a>
            </div>

我用你的代码做了一个小动作：它在Safari中似乎运行良好，问题是否只发生在特定的屏幕尺寸上？不，不管怎样，它似乎都是这样的-徽标被吹得不成比例。我将在mac电脑上查看它，而不是在我的Windows电脑上，这样我就知道它是否在Safari上全面。是的，@Shruti，它确实回答了这个问题——不过为你的反馈干杯。

img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

body {
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-attachment: fixed;
}

.entry-content p {
    text-align: justify;
}

.hom_lnk {
    height: 50px;
    position: fixed;
    top: 0;
}

@media only screen and (min-width: 770px) {
    .navbar-inverse {
        border: 0;
        background-color: rgba(0,0,0,0);
    }
}

@media only screen and (min-width: 770px) {
    .navbar-fixed-top {
        position: relative;
        margin-top: -7.25%;
    }
}

@media only screen and (min-width: 1080px) {
    .navbar-fixed-top {
        position: relative;
        margin-top: -7%;
        padding-left: 5%;
    }
}

@media only screen and (min-width: 1540px) {
    .navbar-fixed-top {
        position: relative;
        margin-top: -7%;
        padding-left: 5%;
    }
}

#xsg {
    height: 25px;
    width: 100%;
}

.nav_bar {
    max-height: 60px;
    position: relative;
    float: left;
    width: 100%;
    margin-top: -7%;
    z-index: -2;
}


.logo {
    display: block;
    max-width: 40vw;
    position: relative;
    float: right;
    top: 4%;
    z-index: 15;
    border-radius: 100%;
}

.hdr_img {
    width: 100%;
    height: auto;
    z-index: 10;
    position: absolute;
    top: 0;
}

.bkg_img {
    width: 100%;
    height: 100%;
}



ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

.dropdown-menu > li > a {
    background-color: white;
    border: 0;
    color: #431E87;
    font-family: 'Muli', sans-serif;
} 

.dropdown-menu > li > a:hover {
    color: #C83938;
    font-family: 'Muli', sans-serif;
} 

.navbar-nav > li > .dropdown-menu {
    border: 1.5em solid white;
    box-shadow: 10px 10px 5px #888888;
    padding: 0;
    border-radius: 25px 25px 5px 25px;
    position: absolute;
    top: 12vh;
}

@media only screen and (min-width: 770px) {
    .nav > li > a:hover:after {
        content: url("http://waywarddesignco.com/wp-content/uploads/2015/04/smallheart_100pix.png");
        position: absolute;
        right: -10%; 
        top: -20px;
    }
}

.navbar-inverse .navbar-nav > li > a {
    font-family: 'Muli', sans-serif;
    font-size: 1.5em;
    color: white;
}

@media only screen and (max-width: 1080px) {
    .navbar-inverse .navbar-nav > li > a {
        font-family: 'Muli', sans-serif;
        font-size: 1.25em;
        color: white;
    }
}

.navbar-inverse .navbar-nav > li > a:hover {
    color: #EDA93F;
    font-size: 1.5em;
}

ul.xoxo {
    list-style: none;
    padding-left: 0;
    margin: 2px auto;
}

#content {
    float: left;
    width: 75%;
    padding-left: 35px;
    padding-right: 35px;
}

@media only screen and (max-width: 770px) {
    #content {
        width: 100%;
        padding-top: 25px;
    }
}

#sidebar {
    float: right;
    width: 24%;
    margin-right: 1%;
    border-left: .5vw solid rgba(67, 31, 132,.5);
    border-top: .5vw solid rgba(67, 31, 132,.5);
    border-radius: 25px;
    padding-top: 7px;
}

.smb {
    width: 2.5vw;
    height: 2.5vw;
    margin-right: 2px;
}



@-webkit-keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

@keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

.hvr-pulse {
  position: relative;
  top: 4%;
  float: right;
  display: block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}

.hvr-pulse:hover, .hvr-pulse:focus, .hvr-pulse:active {
  -webkit-animation-name: hvr-pulse;
  animation-name: hvr-pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}