0

異なるブラウザーを使用しているにもかかわらず、私の Web サイトが Samsung と Motorola のデバイスで正しく表示されません。他のすべては問題ありません。transform css を使用した領域がバラバラになります。http://www.cawws.org/index.html

理解できません。さまざまな修正を試みました。なだ。何か助けはありますか？

ありがとう

MRT

4

1 に答える 1

0

ここに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 のデフォルト ブラウザを実行しているほとんどの Samsung デバイスでバラバラになります。www.cawws.org

于 2013-08-22T02:28:02.330 に答える