Question

尽管使用了不同的浏览器，但我的网站在三星和摩托罗拉设备上无法正常显示。所有其他人都很好。使用变换css的区域分开。 http://www.cawws.org/index.html

我不明白。我尝试了各种修复方法。纳达。有什么帮助吗？

由于

MRT

Answer 1

这是html

<body> 
<div class="container">
<!-- Start Nav Structure -->
<div class="cn-wrapper" id="cn-wrapper">
<ul>
<li><a href="beliefs.html"><span>values</span></a></li>
<li><a href="dogs.html"><span>dogs</span></a></li>
<li><a href="walkers.html"><span>walkers</span></a></li>
<li><a href="cats.html"><span>cats</span></a></li>
<li><a href="index.html"><span>home</span></a></li>                   
</ul>
</div>
<!-- End Nav Structure -->
    <!-- Top Navigation -->
      <div class="sunny"><img src="sunny.jpg" width="100%"></div>
 <header>
<h1>CHICAGO ALL WEATHER WALKERS<br><span>Sunny, warm, prompt - everyday!</span></h1>
<h1><span style="color:#030";>dependable dog walking/sitting, cat sitting, home stays,                   more...</span></h1>
<h1 style="color: #C33"; > call (312) 373-0507</h1>
<p>
  <strong>Give us a bark:</strong></p><br>
<p>
<i class="icon-twitter icon-4x"></i>&nbsp;&nbsp;&nbsp;&nbsp;
<i class="icon-google-plus icon-4x"></i>&nbsp;&nbsp;&nbsp;&nbsp;
<i class="icon-facebook icon-4x"></i>
</p>
<br>    
 </header>          
        </div><!-- /container -->
    <script src="js/polyfills.js"></script>
</body>

css：

 .csstransforms .cn-wrapper {
    font-size: 1em;
    width: 26em;
    height: 26em;
    overflow: hidden;
    position: fixed;
    left: 50%;
    border-radius: 50%;
    margin-left: -13em; 
        position: absolute;
  border-radius: 50%;
  pointer-events: auto;
}

.csstransforms .cn-wrapper li {
  position: absolute;
  font-size: 1.5em;
  width: 10em;
  height: 10em;
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  overflow: hidden;
  left: 50%;
  top: 50%;
  margin-top: -1.3em;
  margin-left: -10em;
  -webkit-transition: border .3s ease;
  -moz-transition: border .3s ease;
  transition: border .3s ease;
}

.csstransforms .cn-wrapper li a {
  display: block;
  font-size: 1.18em;
  height: 15em;
  width: 14.9em;
  position: absolute;
  bottom: -7.25em;
  right: -7.25em;
  border-radius: 50%;
  text-decoration: none;
  color: #fff;
  padding-top: 1.8em;
  text-align: center;
  -webkit-transform: skew(-50deg) rotate(-70deg) scale(1);
  -ms-transform: skew(-50deg) rotate(-70deg) scale(1);
  -moz-transform: skew(-50deg) rotate(-70deg) scale(1);
  transform: skew(-50deg) rotate(-70deg) scale(1);
  -webkit-backface-visibility: hidden;
    -webkit-transition: opacity 0.3s, color 0.3s;
  -moz-transition: opacity 0.3s, color 0.3s;
  transition: opacity 0.3s, color 0.3s;
}

.csstransforms .cn-wrapper li a span {
    font-size: .6em;
    opacity: 0.7;
    top: -.9em;
}

/* for a central angle x, the list items must be skewed by 90-x degrees
in our case x=40deg so skew angle is 50deg
items should be rotated by x, minus (sum of angles - 180)2s (for this demo) */

.csstransforms .cn-wrapper li:first-child {
  -webkit-transform: rotate(-10deg) skew(50deg);
  -ms-transform: rotate(-10deg) skew(50deg);
  -moz-transform: rotate(-10deg) skew(50deg);
  transform: rotate(-10deg) skew(50deg);
}

.csstransforms .cn-wrapper li:nth-child(2) {
  -webkit-transform: rotate(30deg) skew(50deg);
  -ms-transform: rotate(30deg) skew(50deg);
  -moz-transform: rotate(30deg) skew(50deg);
  transform: rotate(30deg) skew(50deg);
}

列表项在css中设置为“skew”。它们在运行Android默认浏览器的大多数三星设备中分崩离析。 www.cawws.org

android设备浏览器显示问题

1 个答案: