www.prismasites.com
定价部分:
The 3 Pricing Plans 的 DIV 框在使用 chrome 时以正常大小显示，但在使用 Firefox 时显得非常小。
这是我的DIV代码
#Pricing {
height: 100vh;
width: 100%;
background: #CEC8B6;
position: relative;
border: 0px solid black;
top: 0px;
}
#PricingHeader1 {
height: 5vh; width: 100%; background-image: url("http://www.prismasites.com/wp-content/themes/Prismasites/images/DollarBorderTop.jpg"); background-size: 100% 100%; position: absolute; top: 0px; margin: 0; padding: 0; border: 0px solid black; z-index: 999; }
#PricingInfo {
overflow: hidden;
height: 9%;
width: 95%;
top: 6%;
border: 0px solid green;
position: relative;
margin: auto;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#PricingBoxContainer {
height: 65vh;
width: 100%;
position: relative;
top: 8%;
border: 0px solid green;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.PricingBoxContainers {
height: 65vh;
width: calc(100% / 3);
position: relative;
display: inline-block;
float: left;
top: 0%;
border: 0px solid orange;
margin: 0;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#PricingBox1000Margin {
height: 100%;
width: 100%;
position: relative;
display: table;
align-items: center;
display: flex;
justify-content: center;
margin: auto;
padding: 0;
border: 0px solid black;
z-index: 999;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#PricingBox1000 {
height: 90%;
width: 90%;
position: relative;
display: table-cell;
vertical-align: middle;
align-items: center;
justify-content: center;
margin: 0 auto;
padding: 0;
border: 0px solid black;
z-index: 999;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#PricingBox1700 {
height: 100%;
width: 90%;
position: relative;
display: inline-block;
margin: 0 auto;
padding: 0;
border: 0px solid black;
z-index: 999;
}
#PricingBox2500 {
height: 100%;
width: 90%;
position: relative;
display: inline-block;
right: 1.5%;
margin: 0;
padding: 0;
border: 0px solid black;
z-index: 999;
}
#PB1000TLCorner {
height: 5%; width: 5%; position: relative; display: inline-block; border: 0px solid green; background-image: url("http://www.prismasites.com/wp-content/themes/Prismasites/images/Pricing/TLCorner.png"); background-size: 100% 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
#PB1000TMBorder {
height: 5%; width: 90%; position: relative; display: inline-block; border: 0px solid green; background-image: url("http://www.prismasites.com/wp-content/themes/Prismasites/images/Pricing/TBorder.png"); background-size: 100% 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
#PB1000TRCorner {
height: 5%; width: 5%; position: relative; display: inline-block; border: 0px solid green; background-image: url("http://www.prismasites.com/wp-content/themes/Prismasites/images/Pricing/TRCorner.png"); background-size: 100% 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
#PB1000MLBorder {
height: 90%; width: 5%; position: relative; display: inline-block; border: 0px solid green; background-image: url("http://www.prismasites.com/wp-content/themes/Prismasites/images/Pricing/LBorder.png"); background-size: 100% 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
#PB1000Containr {
vertical-align: top;
height: 90%;
width: 90%;
position: relative;
display: inline-block;
top: 0%;
border: 0px solid green;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#Pricing1000Title {
height: 7.5%;
width: 100%;
position: relative;
border: 1px solid black;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#Pricing1000Price {
height: 7.5%;
width: 100%;
position: relative;
border: 1px solid black;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#Pricing1000InfoContainer {
height: 70%;
width: 100%;
position: relative;
border: 1px solid black;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#Pricing1000Services {
vertical-align: top;
height: 100%;
width: 50%;
position: relative;
display: inline-block;
border: 1px solid black;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#Pricing1000Payments {
vertical-align: top;
height: 100%;
width: 50%;
position: relative;
display: inline-block;
border: 1px solid black;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#Pricing1000SummaryContainer {
height: 15%;
width: 100%;
position: relative;
border: 1px solid black;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#PB1000MRBorder {
height: 90%; width: 5%; position: relative; display: inline-block; border: 0px solid green; background-image: url("http://www.prismasites.com/wp-content/themes/Prismasites/images/Pricing/LBorder.png"); background-size: 100% 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -moz-transform: scaleX(-1);-o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; }
#PB1000BLCorner {
height: 5%; width: 5%; position: relative; display: inline-block; border: 0px solid green; background-image: url("http://www.prismasites.com/wp-content/themes/Prismasites/images/Pricing/TLCorner.png"); background-size: 100% 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -moz-transform: scaleY(-1);-o-transform: scaleY(-1); -webkit-transform: scaleY(-1); transform: scaleY(-1); filter: FlipV; -ms-filter: "FlipV"; }
#PB1000BMBorder {
height: 5%; width: 90%; position: relative; display: inline-block; border: 0px solid green; background-image: url("http://www.prismasites.com/wp-content/themes/Prismasites/images/Pricing/TBorder.png"); background-size: 100% 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -moz-transform: scaleY(-1);-o-transform: scaleY(-1); -webkit-transform: scaleY(-1); transform: scaleY(-1); filter: FlipV; -ms-filter: "FlipV"; }
#PB1000BRCorner {
height: 5%; width: 5%; position: relative; display: inline-block; border: 0px solid green; background-image: url("http://www.prismasites.com/wp-content/themes/Prismasites/images/Pricing/TRCorner.png"); background-size: 100% 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -moz-transform: scaleY(-1);-o-transform: scaleY(-1); -webkit-transform: scaleY(-1); transform: scaleY(-1); filter: FlipV; -ms-filter: "FlipV"; }
#PricingDisclaimer {
height: 9%;
width: 95%;
top: 10%;
border: 0px solid green;
position: relative;
font-size: 75%;
margin: auto;
overflow: hidden;
}
.PricingServices {
color: #006838;
}
#PricingHeader2 {
height: 5vh;
width: 100%;
background-image: url("http://www.prismasites.com/wp-content/themes/Prismasites/images/DolarBorder1.jpg");
background-size: 100% 100%;
position: absolute;
bottom: 0px;
margin: 0;
padding: 0;
border: 0px solid black;
z-index: 999;
}<div id="Pricing">
<div id="PricingHeader1"></div>
<div id="PricingInfo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla tempus semper. Nam ut gravida odio. Morbi feugiat iaculis nisl, tincidunt congue arcu sagittis id. Duis fermentum mauris ut justo malesuada auctor. Nullam aliquam sit amet ante sit
amet rhoncus. Suspendisse varius ultricies facilisis. Ut auctor ligula pretium dapibus vestibulum. Sed ac libero auctor, consectetur sapien nec, laoreet lacus. Sed porta est nec massa luctus, eget mollis magna malesuada. Sed pharetra convallis turpis,
vel eleifend orci lacinia non. Ut mi lacus, accumsan eget arcu porttitor, viverra pellentesque quam.</div>
<div id="PricingBoxContainer">
<div class="PricingBoxContainers">
<div id="PricingBox1000Margin">
<div id="PricingBox1000">
<div id="PB1000TLCorner"></div>
<div id="PB1000TMBorder"></div>
<div id="PB1000TRCorner"></div>
<div id="PB1000MLBorder"></div>
<div id="PB1000Containr">
<div id="Pricing1000Title"></div>
<div id="Pricing1000Price"></div>
<div id="Pricing1000InfoContainer">
<div id="Pricing1000Services"></div>
<div id="Pricing1000Payments"></div>
</div>
<div id="Pricing1000SummaryContainer"></div>
</div>
<div id="PB1000MRBorder"></div>
<div id="PB1000BLCorner"></div>
<div id="PB1000BMBorder"></div>
<div id="PB1000BRCorner"></div>
</div>
</div>
</div>
<div class="PricingBoxContainers">
<div id="PricingBox1000Margin">
<div id="PricingBox1000">
<div id="PB1000TLCorner"></div>
<div id="PB1000TMBorder"></div>
<div id="PB1000TRCorner"></div>
<div id="PB1000MLBorder"></div>
<div id="PB1000Containr">
<div id="Pricing1000Title"></div>
<div id="Pricing1000Price"></div>
<div id="Pricing1000InfoContainer">
<div id="Pricing1000Services"></div>
<div id="Pricing1000Payments"></div>
</div>
<div id="Pricing1000SummaryContainer"></div>
</div>
<div id="PB1000MRBorder"></div>
<div id="PB1000BLCorner"></div>
<div id="PB1000BMBorder"></div>
<div id="PB1000BRCorner"></div>
</div>
</div>
</div>
<div class="PricingBoxContainers">
<div id="PricingBox1000Margin">
<div id="PricingBox1000">
<div id="PB1000TLCorner"></div>
<div id="PB1000TMBorder"></div>
<div id="PB1000TRCorner"></div>
<div id="PB1000MLBorder"></div>
<div id="PB1000Containr">
<div id="Pricing1000Title"></div>
<div id="Pricing1000Price"></div>
<div id="Pricing1000InfoContainer">
<div id="Pricing1000Services"></div>
<div id="Pricing1000Payments"></div>
</div>
<div id="Pricing1000SummaryContainer"></div>
</div>
<div id="PB1000MRBorder"></div>
<div id="PB1000BLCorner"></div>
<div id="PB1000BMBorder"></div>
<div id="PB1000BRCorner"></div>
</div>
</div>
</div>
</div>
<div id="PricingDisclaimer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla tempus semper. Nam ut gravida odio. Morbi feugiat iaculis nisl, tincidunt congue arcu sagittis id. Duis fermentum mauris ut justo malesuada auctor. Nullam aliquam sit amet ante sit
amet rhoncus. Suspendisse varius ultricies facilisis. Ut auctor ligula pretium dapibus vestibulum. Sed ac libero auctor, consectetur sapien nec, laoreet lacus. Sed porta est nec massa luctus, eget mollis magna malesuada. Sed pharetra convallis turpis,
vel eleifend orci lacinia non. Ut mi lacus, accumsan eget arcu porttitor, viverra pellentesque quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla tempus semper. Nam ut gravida odio. Morbi feugiat iaculis nisl, tincidunt congue
arcu sagittis id. Duis fermentum mauris ut justo malesuada auctor. Nullam aliquam sit amet ante sit amet rhoncus. Suspendisse varius ultricies facilisis. Ut auctor ligula pretium dapibus vestibulum. Sed ac libero auctor, consectetur sapien nec, laoreet
lacus. Sed porta est nec massa luctus, eget mollis magna malesuada. Sed pharetra convallis turpis, vel eleifend orci lacinia non. Ut mi lacus, accumsan eget arcu porttitor, viverra pellentesque quam.
</div>
<div id="PricingHeader2"></div>
</div>为什么它可以在一个浏览器上运行，而在另一个浏览器上却不能运行？ 我怎样才能让它在两种浏览器上工作？
最佳答案
删除 display: table-cell; 在 #PricingBox1000。
关于html - 基本 CSS 代码适用于 Chrome 但不适用于 Firefox，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34230971/