CSS未加载到移动版Safari中

时间：2015-01-10 15:09:40

标签： php html css safari mobile-safari

长话短说我在页面中直接使用内嵌CSS的时间最长，但我决定把它全部放在一个文件中以保证我自己的理智。我试过了典型的

<link rel="stylesheet"  href="URL">

方法并加载，但看起来非常奇怪，所以我决定用像

这样的PHP包含它 
<?php include("assets/style.php"); ?>

它在我的所有桌面浏览器（如Chrome和IE）上运行得非常好，但在移动游戏中整个页面都很乱。

这是我的页面。 

<!DOCTYPE html>
<html>
  <head>
    <title>EPICMC</title>
    <meta http-equiv=Content-Type content="text/html;charset=UTF-8">
    <meta name="description" content="EPICMC is a service that lets you interact with your favorite servers in a new and exciting way.">
    <meta name="keywords" content="epicmc,epic mc,epicmc server,epicmc/register,epicmc mcpe,epicmc vote,epicmcs vote,epicmc twitter,epicmc register,epicmcgaming,epicmc mcpe,epicmcpixels,epicmc donate,epicmcs donate,epic mc admin,epic mc builds">
    <meta name=viewport content="width=device-width, user-scalable=no">
    <link href="https://fonts.googleapis.com/css?family=Days+One&text=EPICM" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Numans' rel='stylesheet' type='text/css'>
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <link href="https://epicmc.us/dist/css/ripples.min.css" rel="stylesheet">
    <link href="https://epicmc.us/dist/css/material-wfont.min.css" rel="stylesheet">
    <?php include("assets/style.php"); ?>
  </head>
  <body>
<?php include("assets/header.php"); ?>
    <hgroup>
      <h1 class="logo"><a href="https://epicmc.us">EPIC<font color="#00aa00">MC</font></a></h1>
    </hgroup>
    <form id="statsform" action="stats.php" method="GET">
      <div class="group">
        <input type="text" name="player" id="CAPSINPUT" placeholder="USERNAME" autocomplete="off"><span class="bar"></span>
      </div>
      <center><input type="submit" value="CHECK STATS" class="load-more"></a></center>
    </form>
    </div>
    </div>
    </div>
     <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- BANNER -->
<center><ins class="adsbygoogle"
     style="display:inline-block;width:320px;height:50px"
     data-ad-client="ca-pub-4863164385597709"
     data-ad-slot="3088967678"></ins></center>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script src="https://epicmc.us/dist/js/textbox.js"></script>
    <script src="https://epicmc.us/dist/js/loadingbutton.js"></script>
    <script src="https://epicmc.us/dist/js/ripples.min.js"></script>
    <script src="https://epicmc.us/dist/js/material.min.js"></script>
    <script>
      $(document).ready(function() {
          $.material.init();
      });
    </script>
  </body>
</html>

这是我的style.php 

<style type="text/css">
@charset "UTF-8";

 * { box-sizing: border-box;
}

p {
    display: inline;
}

form {
    width: 300px;
    margin: 4em auto;
    padding: 3em 2em 2em 2em;
    border: 1px solid #ebebeb;
    box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
}

.group {
    position: relative;
    margin-bottom: 45px;
}

input {
    font-size: 18px;
    font-family: 'Numans', sans-serif;
    padding: 10px 10px 10px 5px;
    -webkit-appearance: none;
    display: block;
    color: #636363;
    width: 100%;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #757575;
    background: transparent;
}

input:focus {
    outline: none;
}

input:focus ~ label, input.used ~ label {
    top: -20px;
    transform: scale(.75);
    left: -2px;
    color: #00aa00;
}

.bar {
    position: relative;
    display: block;
    width: 100%;
}

.bar:before, .bar:after {
    content: '';
    height: 2px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: #00aa00;
    transition: all 0.2s ease;
}

.bar:before {
    left: 50%;
}

.bar:after {
    right: 50%;
}

input:focus ~ .bar:before, input:focus ~ .bar:after {
    width: 50%;
}

.highlight {
    position: absolute;
    height: 60%;
    width: 100px;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: 0.5;
}

a:link,a:visited,a:hover,a:active {
    color: #636363;
    text-decoration: none;
}

body {
    font-family: 'Numans', sans-serif;
    background: #eee;
    -webkit-font-smoothing: antialiased;
}

hgroup {
    text-align: center;
    margin-top: 4em;
}

h1 {
    color: #636363;
}

h2 {
    font-family: 'Numans', sans-serif;
    font-size: 12px;
}

#error {
    font-family: 'Numans', sans-serif;
    font-size: 15px;
    text-align: center;
    margin-top: -15px;
    margin-bottom: 20px;
}

#username, h5 {
    font-family: 'Numans',sans-serif;
    font-size: 18px;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.logo {
    font-family: 'Days One', sans-serif;
    font-weight: lighter;
    font-size: 48px;
    margin-bottom: 35px;
    text-align: center;
}

.alert-info, .alert-danger, .alert-warning, .alert-success {
    margin-top: -20px;
    background-color: #323232;
}

.container {
    text-align: center;
}

.load-more {
    background-color: #00aa00;
    color: #ffffff;
    display: block;
    font-family: 'Numans', sans-serif;
    font-weight: lighter;
    height: 3em;
    line-height: 3em;
    overflow: hidden;
    padding: 0 3em;
    text-align: center;
    text-decoration: none;
    border-bottom: none;
}

.load-more.load-more--loading {
    background-color: transparent;
    border: .3em solid #e1e1e1;
    border-radius: 1.5em;
    border-top-color: #00aa00;
    box-sizing: border-box;
    height: 3em;
    color: transparent;
    padding: 0;
    pointer-events: none;
    width: 3em;
    -webkit-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
    };
}

#CAPSINPUT, .CAPSINPUT {
    text-transform: uppercase;
}

#stats {
    width: 300px;
    margin: 4em auto;
    padding: 1.5em 1.5em 1.5em 1.5em;
    background: #fafafa;
    border: 1px solid #ebebeb;
    box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
}

#statsform {
    background: #fafafa;
}

#search {
    background: transparent;
}

table {
    color: #333;
    border-collapse: collapse;
    border-spacing: 0;
    border: 2px solid #ebebeb;
    cursor: pointer;
}

td, th {
    border: 1px solid transparent;
 /* No more visible border */
    height: 30px;
    transition: all 0.3s;
  /* Simple transition for hover effect */;
}

th {
    background: #DFDFDF;
  /* Darken header a bit */
    font-weight: bold;
}

td {
    background: #FAFAFA;
    text-align: center;
    width: 33.33%;
    border-left: 2px solid #ebebeb;
}
    /* Cells in even rows (2,4,6...) are one color */ 
tr:nth-child(even) td {
    background: #FEFEFE;
}   
    /* Cells in odd rows (1,3,5...) are another (excludes header cells)  */ 
tr:nth-child(odd) td {
    background: #F1F1F1;
}

tr td:hover {
    background: #666;
    color: #FFF;
} /* Hover cell effect! */
.fa-stack {
    color: #00aa00;
}

#container-avatar img {
    background: url('https://epicmc.us/images/herobrine.png');
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    height: 85px;
    width: 85px;
    pointer-events: none;
}

#container-avatar #badge {
    font-size: 12px;
    margin: -22px 0 0 130px;
    position: absolute;
    text-align: center;
    width: 68px;
}
</style>

1 个答案:

答案 0 :(得分：1)

href应该是＆＃34; style.css＆＃34;并将style.php重命名为style.css并删除标记

相关问题
最新问题