我正在自定义我的主题，并且我遇到了一些我似乎无法解决的跨浏览器问题。我尝试过使用normalizer而没有运气。
到处都有我的产品页面上的斜体文字（在使用平板电脑和iPhone的Safari上）它显示为空白区域，与其他浏览器一样（我有Windows笔记本电脑和Android手机，我使用Chrome），一切都显示正常
如果我没有任何Apple产品或足够的资金用于这些虚拟机服务，我不确定如何更正或甚至测试它。
如何使用自定义代码实现跨浏览器兼容性？
问题区域位于标题下方的产品描述区域中，使得价格和描述显示为空白区域（我假设因为它们包含斜体），然后在颜色样本区域下方我有其他文本区域斜体在Apple设备上显示为空白区域，这就是我将分享的HTML以及我为此主题添加的CSS。
HTML（产品说明）：
<p class="product-single__price product-single__price-product-template">
<span class="visually-hidden">Regular price</span>
<s id="ComparePrice-product-template" class="hide"></s>
<span class="product-price__price product-price__price-product-template">
<span id="ProductPrice-product-template" itemprop="price" content="60.0">
$60.00
</span>
<span class="product-price__sale-label product-price__sale-label-product-template hide">Sale</span>
</span>
</p>
<!-- Re-Arranging Product Page & Tabs -->
<p><span><strong>Petite Cherie Velvet Box</strong> from the collection Forever and Ever, is really unique and unforgettable! This flower arrangement will last up to 1 year guarantee (usually much longer). This is REAL highest quality preserved flowers. Their beauty and soft delicate touch and appearance make it impossible to differentiate from fresh cut flowers.</span></p>
<p><span>*** <em>Not all pictures correspond with the color of the box. Please ensure to select the color of the box from the drop down menu</em> ***</span></p>
HTML（其他文字区域）：
<div class="product-single__description rte" itemprop="description">
<div>
<ul class="tabs">
<li><a href="#tab-1" class="">Care Instructions</a></li>
<li><a href="#tab-2" class="">Delivery & Shipping</a></li>
<li><a href="#tab-3" class="active">Returns & Refunds</a></li>
</ul>
<div id="tab-1" style="display: none;">
<p>Keep away from water and direct sunlight!</p>
<p>Your roses feel comfortable in their box. Please do not remove them.</p>
<p><i>We feel it is important to mention that all substances used in the preservation process are non-toxic, non-corrosive, non-carcinogenic. The solutions and colorants are the same as those used in food, and textile manufacturing, therefore, they do not represent any health or environmental risk.</i></p>
</div>
<div id="tab-2" style="display: none;">
<p><i>Delivery is only available in the Los Angeles Area, for a flat rate of $25. For same day delivery please place your orders with us by 10:00am.</i></p>
<p>This item ships nationwide. Orders usually ship 24-48 hours within receiving the order.</p>
<p>We will do our best to deliver the product on your desired delivery date. Once your order is in the hands of the carrier we have no control over the delivery process and we recommend you choose a delivery date at least one day early to avoid disappointment.</p>
</div>
<div id="tab-3" style="display: block;">
<!-- -->
<p>Please choose carefully as we will not be able to offer refund or exchange on any Holy Chic Flower Box due to simple change of mind.</p>
<p>All our arrangements are made to order.</p>
</div>
</div>
</div>
添加+调整的CSS：
body {
margin: 0;
line-height: 1.8em;
}
body #canvas {
background-color: #fff
}
#canvas {
max-width: 1300px;
min-width: 350px;
margin: 0 auto;
/* padding: 100px 100px 0 */
padding: 60px 100px 0;
}
#canvas {
margin: 45px auto;
border-style: solid;
border-color: rgba(0, 0, 0, .1);
}
#canvas {
border-width: 2px;
}
@media only screen and (max-width:1390px) {
#canvas {
margin: 45px auto;
max-width: 1100px;
}
}
@media only screen and (max-width:1024px) {
#canvas {
margin: 0px auto;
border-width: 0px !important
}
}
@media only screen and (max-width:767px) {
#canvas {
padding: 50px 50px 0
}
}
@media only screen and (max-width:640px) {
#canvas {
padding: 0 17px
}
}
#canvas header {
background: #fff;
}
/*================ Nav Adjustments ================*/
nav.border-bottom {
border-bottom-color: transparent;
}
.site-nav {
text-transform: uppercase;
font-size: 14px;
/* Adding Gotham To Nav */
font-family: 'Gotham';
font-weight: normal;
font-style: normal;
}
.site-nav a {
color: rgba(0,0,0,.5);
border-bottom-width: 2px;
border-bottom-color: transparent;
border-bottom-style: solid;
padding: 0;
margin: 0 20px;
line-height: 1.6em;
}
@media screen and (max-width: 1087px) and (min-width: 744px) {
.site-nav a {
padding: 0px 0px !important;
margin: 0 15px;
font-size: 12px !important;
}
}
@media screen and (max-width: 845px) and (min-width: 744px) {
.site-nav a{
margin: 0 8px;
padding: 0px 0px !important;
font-size: 12px !important;
}
}
.site-nav a:hover {
color: #111;
border-bottom-color: rgba(0,0,0,.1);
}
.page-divider {
line-height: 1.6em;
margin-top: -4.5em;
margin-bottom: 4.6em;
font-size: 14px;
border-bottom-width: 2px;
border-bottom: 2px solid rgba(0,0,0,.1);
}
@media screen and (max-width: 869px) {
.page-divider {
border-bottom: 2px solid transparent;
}
}
.list--inline li {
background: #fff;
}
@media screen and (min-width: 1087px) {
.list--inline li {
margin: 0 -2px;
}
}
@media screen and (max-width: 648px) {
.page-divider {
display: none;
}
}
/*================ Product Page ================*/
.btn {
background: #fff !important;
border: 2px solid #7f7f7f !important;
color: #7f7f7f !important;
}
.btn:hover, .btn:focus {
background: #7f7f7f !important;
color: #fff !important;
}
/*================ Adjustments ================*/
.main-content {
padding-top: 10px;
}
.search-header {
display: none;
}
/*================ Tabs ================*/
ul.tabs {
border-bottom: 1px solid transparent !important;
margin: 0px 0 10px !important;
}
ul.tabs li a {
font-size: 15px !important;
padding: 0 10px !important;
color: #7f7f7f !important;
}
ul.tabs li a.active {
top: -3px !important;
padding-top: 2px !important;
color: #4D4D4D !important;
}
@media screen and (max-width: 1390px) and (min-width: 1097px) {
ul.tabs li a {
font-size: 12px !important;
padding: 0 7px !important;
}
}
@media screen and (max-width: 1096px) and (min-width: 1025px) {
ul.tabs li a {
font-size: 11px !important;
padding: 0 5px !important;
}
}
@media screen and (max-width: 1024px) and (min-width: 985px) {
ul.tabs li a {
font-size: 12px !important;
padding: 0 7px !important;
}
}
@media screen and (max-width: 984px) {
ul.tabs li {
width: 100% !important;
text-align: center !important;
}
ul.tabs li a {
font-size: 15px !important;
padding: 0 10px !important;
}
}
/*================ Changing font================*/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
font-family: 'Gotham';
font-weight: normal;
font-style: normal;
}
body, p {
font-family: 'Gotham';
font-weight: normal;
font-style: normal;
color: #7f7f7f;
}
p {
line-height: 1.8em;
font-size: 17px;
}
a {
color: #7f7f7f;
}
/*================ Responsive Adjustments ================*/
@media screen and (max-width: 1024px) {
.page-width {
padding-left: 1px !important;
padding-right: 1px !important;
}
body, html {
background-color: #fff !important;
}
}
@media screen and (min-width: 749px) {
.mobile-nav {
display: none;
}
}
@media screen and (max-width: 1087px) and (min-width: 576px) {
.medium-up--one-half {
width: 50% !important;
}
/* THUMBNAIL SOLUTION */
.medium-up--one-quarter {
width: 25% !important;
}
}
@media screen and (max-width: 575px) {
.medium-up--one-half {
width: 100% !important;
}
/* PLUGIN RESP. ADJUSTMENT */
.swatch {
margin: 1em 4px !important;
}
}
/*================ Mobile Nav Touch Ups ================*/
.mobile-nav-wrapper {
background-color: #fff;
text-align: center;
left: 0;
}
.mobile-nav__item.border-bottom {
border-bottom: 1px solid #fff;
}
.mobile-nav__link {
color: rgba(0,0,0,0.5);
}
:focus {
outline: transparent auto 1px;
}
.mobile-nav-wrapper::after {
border-bottom: 1px solid #fff;
}
@media screen and (max-width: 1087px) and (min-width: 744px) {
.site-nav {
margin: 0 !important;
}
}
/*================ Mobile Product Page Touch Ups ================*/
.btn.thumbnails-slider__btn {
background: #fff !important;
color: #7f7f7f !important;
border: 2px solid #fff !important;
}
/*================ Hero Img Touch Ups ================*/
.box {
background-color: #fff;
}