Html 在引号文本前后定位引号符号

我试图在段落前后放置一个引号符号。我用的是绝对值。使用不同的智能手机浏览器（如iPhone 5/iPhone 6）打开我的页面将导致不同的结果。任何想法！这是我的密码

HTML:-

<div class="quoteBlock">
  <div class="blockWrap">
    <span class="headline">italian<br/>classic</span>
    <p class="quoteText">
      <span class="quoteBegin">“</span>Lorem ipsum dolor sit Amet, consectetuer adipiscing.<br/>Aenean commodo ligula eget dolor.<br/>Donec pede justo, fringilla vel, alique, vulputate eget, arcu.<span class="quoteEnd">„</span>
    </p>
    <a class="ctaBlock">scorpi più prodotti</a>
  </div>
</div>

---

我想这就是你要找的

#content.quoteBlock{
位置：相对位置；
背景色：#D4AF95；
}
#内容。区块包装{
文本对齐：居中；
垫面：10%；
垫底：10%；
}
#content.quoteBlock.headline{
颜色：#333；
字体系列：arial，helvetica；
文本转换：大写；
字母间距：.1米；
字体大小：20px；
字号：700；
线高：23px；
}
#content.quoteText{
字体：斜体；
填充：15%；
线高：21px；
位置：相对位置；
}
#content.quoteBegin{
颜色：#333；
字体系列：佐治亚，衬线；
字体大小：37px；
字号：700；
位置：绝对位置；
左：50px；
顶部：58px；
}
#内容。引用{
颜色：#333；
字体系列：佐治亚，衬线；
字体大小：37px；
字号：700；
位置：绝对位置；
右：70px；
顶部：121px；
}
大宗报价{
字体系列：“Helvetica”，无衬线；
字体大小：1.1米；
字体：斜体；
颜色：#999999；
字号：600；
宽度：90%；
利润率：1.2%0；
填充物：1%6.3%；
线高：1.45；
位置：相对位置；
}
blockquote p{
字体系列：“Helvetica”，无衬线；
字号：1em；
字体风格：普通；
颜色：#000；
字体大小：400；
宽度：80%；
填充：1%4.3%；
线高：1.45；
位置：相对位置；
}
区块报价：之前{
显示：块；
内容：“\201C”；
字体大小：55px；
位置：绝对位置；
左：1%；
顶部：-5px；
颜色：#8A8A8A；
}
blockquote：之后{
显示：块；
内容：“\201D”；
字体大小：55px；
位置：绝对位置；
右：3.5%；
顶部：-5px；
颜色：#8A8A8A；
}
区块引用{
颜色：#999999；
字体大小：.95em；
显示：块；
浮动：对；
边缘顶部：5px；
边缘底部：5px；
}
区块引用：之前{
内容：“\2014\2009”；
}

意大利经典

Lorem ipsum dolor sit Amet，Concertetuer Adipising。

这是一个很好的选择。

多涅克·佩德·胡斯托、弗林利亚·维尔、阿利克、瓦普塔特·埃吉特、阿库。
scorpi piùprodotti

我想这就是你要找的

#content.quoteBlock{
位置：相对位置；
背景色：#D4AF95；
}
#内容。区块包装{
文本对齐：居中；
垫面：10%；
垫底：10%；
}
#content.quoteBlock.headline{
颜色：#333；
字体系列：arial，helvetica；
文本转换：大写；
字母间距：.1米；
字体大小：20px；
字号：700；
线高：23px；
}
#content.quoteText{
字体：斜体；
填充：15%；
线高：21px；
位置：相对位置；
}
#content.quoteBegin{
颜色：#333；
字体系列：佐治亚，衬线；
字体大小：37px；
字号：700；
位置：绝对位置；
左：50px；
顶部：58px；
}
#内容。引用{
颜色：#333；
字体系列：佐治亚，衬线；
字体大小：37px；
字号：700；
位置：绝对位置；
右：70px；
顶部：121px；
}
大宗报价{
字体系列：“Helvetica”，无衬线；
字体大小：1.1米；
字体：斜体；
颜色：#999999；
字号：600；
宽度：90%；
利润率：1.2%0；
填充物：1%6.3%；
线高：1.45；
位置：相对位置；
}
blockquote p{
字体系列：“Helvetica”，无衬线；
字号：1em；
字体风格：普通；
颜色：#000；
字体大小：400；
宽度：80%；
填充：1%4.3%；
线高：1.45；
位置：相对位置；
}
区块报价：之前{
显示：块；
内容：“\201C”；
字体大小：55px；
位置：绝对位置；
左：1%；
顶部：-5px；
颜色：#8A8A8A；
}
blockquote：之后{
显示：块；
内容：“\201D”；
字体大小：55px；
位置：绝对位置；
右：3.5%；
顶部：-5px；
颜色：#8A8A8A；
}
区块引用{
颜色：#999999；
字体大小：.95em；
显示：块；
浮动：对；
边缘顶部：5px；
边缘底部：5px；
}
区块引用：之前{
内容：“\2014\2009”；
}

意大利经典

Lorem ipsum dolor sit Amet，Concertetuer Adipising。

这是一个很好的选择。

多涅克·佩德·胡斯托、弗林利亚·维尔、阿利克、瓦普塔特·埃吉特、阿库。
scorpi piùprodotti

您是否正在使用设备元标记？我猜这是一个“像素”的东西。不，我没有使用任何视口元标记。我建议您使用%值，而不是确切的像素数-并添加适当的元标记…或者您可以使用blockquoteear使用设备元标记吗？我猜这是一个“像素”的东西。不，我没有使用任何视口元标记。我建议您使用%值，而不是确切的像素数-并添加适当的元标记…或者您可以使用blockquote

#content .quoteBlock {
  position: relative;
  background-color: #D4AF95;
}

#content .blockWrap {
  text-align: center;
  padding-top: 10%;
  padding-bottom: 10%;
}
#content .quoteBlock .headline {
  color: #333;
  font-family: arial, helvetica;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 20px;
  font-weight: 700;
  line-height: 23px;
}
#content .quoteText {
  font-style: italic;
  padding: 15%;
  line-height: 21px;
  position: relative;
}
#content .quoteBegin { 
  color: #333; 
  font-family: Georgia, serif;
  font-size: 37px;
  font-weight: 700; 
  position: absolute;
  left: 50px;
  top: 58px;
}
#content .quoteEnd { 
  color: #333; 
  font-family: Georgia, serif;
  font-size: 37px;
  font-weight: 700; 
  position: absolute;
  right: 70px;
  top: 121px;
}