在Firefox和移动设备中以移动宽度堆叠的Flexbox列Chrome而非Safari桌面或移动设备

时间：2014-12-24 09:00:37

标签： html css responsive-design mobile-safari flexbox

我正在尝试对其他人创建的页面进行故障排除，之前从未使用过flexbox。它是一个3列的布局，在Firefox或Chrome中调整大小时完美叠加，但在桌面或iPhone上的Safari中查看时，元素不会叠加。第一个似乎隐藏在第二个，第三个保持在右边，在内容区域之外。我发现了一个类似的主题，并在头部添加了视口代码，但它仍然无效。我尝试过几种不同的东西，但似乎没有任何改变。我确信有一些非常简单的东西我会忽略，因为代码有点乱，而且我不熟悉flexbox。

可以在以下位置查看页面：http://www.mapi.com/doshas/vpk-balance.html

以下是该页面的CSS和HTML：

@-ms-viewport {
  width: device-width;
}
@-o-viewport {
  width: device-width;
}
@-viewport {
  width: device-width;
}
.doshas {
  color: white;
  text-shadow: .8px .8px #AAAAAA;
  width: 90px;
  height: 45px;
  text-align: center;
  box-shadow: 4px 4px 10px #646464;
  font-size: .8em;
  float: left;
  clear: both;
  margin-left: 35%;
}
#vataProd,
#pittaProd,
#kaphaProd {
  margin-top: 40px;
  margin-bottom: 12%;
}
#vataProd {
  background-color: #7FB122;
}
#pittaProd {
  background-color: #226CB1;
}
#kaphaProd {
  background-color: #D44F00;
}
.vataBox,
.pittaBox,
.kaphaBox {
  box-shadow: 4px 4px 10px #646464;
  margin-top: 6%;
  padding: 3%;
  height: 470px;
  width: 240px;
  margin-left: 20px;
}
.vataBox2,
.pittaBox2,
.kaphaBox2 {
  box-shadow: 4px 4px 10px #646464;
  margin-top: 220px;
  padding: 3%;
  height: 130px;
  width: 240px;
  margin-left: 20px;
}
.vataBox,
.vataBox2 {
  background-color: #a5cf32;
  list-style-position: inside;
}
.pittaBox,
.pittaBox2 {
  background-color: #6ca8e7;
  list-style-position: inside;
}
.kaphaBox,
.kaphaBox2 {
  background-color: #f28f25;
  list-style-position: inside;
}
.doshaProducts {
  float: left;
  display: block;
  clear: both;
}
#content {
  padding: 0;
}
#flexBox {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-around;
  -ms-flex-pack: justify;
  justify-content: space-around;
}
#flexVata,
#flexPitta,
#flexKapha {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background-repeat: no-repeat;
  min-width: 300px;
  max-width: 300px;
}
#flexVata {
  background-image: url("/doshas/images/vata-background.jpg");
  margin: auto;
  order: 1;
}
#flexPitta {
  background-image: url("/doshas/images/pitta-background.jpg");
  margin: auto;
  order: 2;
}
#flexKapha {
  background-image: url("/doshas/images/kapha-background.jpg");
  margin: auto;
  order: 3;
}
#flexVata img,
#flexPitta img,
#flexKapha img {
  margin-left: auto;
  margin-right: auto;
}
#header {
  color: #7FB122;
  text-align: center;
  font-weight: normal;
  font-size: 1.5em;
}
#footer {
  color: #646464;
  text-align: center;
  font-weight: normal;
  font-size: 1.5em;
  clear: both;
}
.grayBox {
  background-color: #707070;
  color: white;
  font-size: .8em;
  text-align: center;
  padding: .1% 2% .5% 2%;
  border-radius: 25px;
  margin-left: 1%;
}
@media screen and (max-width: 780px) {}
}
#doshaQuiz {
  visibility:hidden;
}
#flexBox div div ul li {
  list-style-type: disc;
  margin-left: 3%;
  margin-right: 3%;
}
.vataBox h3,
.pittaBox h3,
.kaphaBox h3 {
  color: white;
  margin-left: 10%;
  font-size: .9em;
}
.vataBox ul li,
.pittaBox ul li,
.kaphaBox ul li {
  font-size: .8em;
  line-height: 1.3em;
}
.vataBox2 h3,
.pittaBox2 h3,
.kaphaBox2 h3 {
  color: white;
  margin-left: 10%;
  font-size: .9em;
}
.vataBox2 ul li,
.pittaBox2 ul li,
.kaphaBox2 ul li {
  font-size: .8em;
  line-height: 1.3em;
}
#pitta-out {
  -webkit-margin-before: 2.2em;
}
#kapha-out {
  -webkit-margin-before: 3.4em;
}
<!DOCTYPE html>
<html>

<head>
  <title>vpk® Balance | Maharishi Ayurveda Products</title>
  <meta name="description" content="DESCRIPTION.">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
  <%=include( '/template_assets/styleSheets_js.html')%>

</head>

<body>
  <%=include( '/template_assets/googleAnalytics.html')%>
    <%=include( '/template_assets/page_head.html')%>
      <div id="outerWrapper" class="cf">
        <div id="content" class="cf">
          <h2 id="header">YOU ARE A UNIQUE COMBINATION OF ALL 3</h2>
          <h2 id="footer">WHAT’S MY DOSHA? <a href="/doshas/vpk-explanation.html"><span class="grayBox">dosha quiz</span></a></h2>
          <div id="flexBox">
            <div id="flexVata">
              <div class="vataBox2">
                <ul>
                  <li>thin build</li>
                  <li>does not gain weight easily</li>
                  <li>quick to learn, quick to forget</li>
                  <li>enthusiastic & vivacious</li>
                  <li>becomes cold easily</li>
                </ul>
              </div>
              <div class="vataBox">
                <h3>vata in balance:</h3>
                <ul>
                  <li>energetic... vivacious</li>
                  <li>learns easily</li>
                  <li>clear &amp; alert mind</li>
                  <li>falls asleep easily at bedtime</li>
                  <li>balanced digestion &amp; elimination</li>
                  <li>good circulation &amp; even body temperature</li>
                </ul>
                <h3>vata out of balance:</h3>
                <ul>
                  <li>tired and/or fatigued</li>
                  <li>forgetful, or “spaced out”</li>
                  <li>lack of focus</li>
                  <li>difficulty falling asleep</li>
                  <li>occasional constipation</li>
                  <li>poor circulation (cold feet &amp; hands)</li>
                  <li>feelings of anxiousness &amp; worry</li>
                </ul>
              </div>
              <a href="/doshas/vata-dosha.html">
                <div class="doshas" id="vataProd">vata
                  <br>products</div>
              </a>
            </div>
            <!-- #flexVata -->
            <div id="flexPitta">
              <div class="pittaBox2">
                <ul>
                  <li>medium build</li>
                  <li>balanced weight</li>
                  <li>sharp intellect</li>
                  <li>goal oriented</li>
                  <li>becomes hot easily</li>
                </ul>
              </div>
              <div class="pittaBox">
                <h3>pitta in balance:</h3>
                <ul>
                  <li>perfectionist (type A personality)</li>
                  <li>strong intellect</li>
                  <li>strong digestion</li>
                  <li>radiant, glowing skin</li>
                  <li>sleeps through the night</li>
                  <li>inner peace &amp; happiness</li>
                </ul>
                <h3 id="pitta-out">pitta out of balance:</h3>
                <ul>
                  <li>controlling, fiery personality</li>
                  <li>workaholic tendencies</li>
                  <li>overheated, excess stomach acid</li>
                  <li>skin rashes &amp; acne</li>
                  <li>interrupted sleep</li>
                  <li>loose bowel movements</li>
                </ul>
              </div>
              <a href="/doshas/pitta-dosha.html">
                <div class="doshas" id="pittaProd">pitta
                  <br>products</div>
              </a>
            </div>
            <!-- #flexPitta -->
            <div id="flexKapha">
              <div class="kaphaBox2">
                <ul>
                  <li>larger build</li>
                  <li>tendency for weight gain</li>
                  <li>slow to learn, slow to forget</li>
                  <li>sweet & even tempered</li>
                  <li>tends to dislike cold & damp weather</li>
                </ul>
              </div>
              <div class="kaphaBox">
                <h3>kapha in balance:</h3>
                <ul>
                  <li>stable temperament</li>
                  <li>good long-term memory</li>
                  <li>healthy robust physiology</li>
                  <li>strength &amp; stamina</li>
                  <li>compassionate &amp; affectionate</li>
                  <li>sound sleep</li>
                </ul>
                <h3 id="kapha-out">kapha out of balance:</h3>
                <ul>
                  <li>gains weight easily</li>
                  <li>sluggish digestion</li>
                  <li>prone to sinus &amp; respiratory issues</li>
                  <li>lethargy</li>
                  <li>feelings of sadness</li>
                  <li>difficulty waking up</li>
                  <li>food cravings</li>
                </ul>
              </div>
              <a href="/doshas/kapha-dosha.html">
                <div class="doshas" id="kaphaProd">kapha
                  <br>products</div>
              </a>
            </div>
            <!-- #flexKapha -->
          </div>
          <!-- #flexBox -->
        </div>
        <!--end #content -->
      </div>
      <!--end #outerWrapper -->
      <%=include( '/template_assets/footer.html')%>
</body>

</html>

非常感谢任何帮助;谢谢你的时间！

0 个答案:

没有答案
相关问题
最新问题