瑞典字符字体有时重叠

时间:2016-10-05 04:15:57

标签: html css

我有以下风格的div。

此问题仅针对瑞典字符发生。不适合英语。



.pricing-box {
  text-align: center;
  border: 1px solid #dfe8f1
}
.pricing-box .pricing-title,
.pricing-box .pricing-specs {
  margin: -1px -1px 0
}
.pricing-box .pricing-title {
  font-weight: normal;
  padding: 15px
}
.pricing-box ul {
  margin: 0;
  padding: 0;
  list-style: none
}
.pricing-box .pricing-specs {
  padding: 10px 15px 20px
}
.pricing-box .pricing-specs span {
  font-size: 50px
}
.pricing-box .pricing-specs span sup {
  font-size: 30px;
  margin-left: -20px;
  padding-right: 5px
}
.pricing-box .pricing-specs i {
  font-size: 14px;
  font-style: normal;
  display: block;
  color: rgba(255, 255, 255, .6)
}
.pricing-box ul li {
  font-size: 14px;
  line-height: 48px;
  height: 48px;
  padding: 0 10px;
  border-bottom: #eee solid 1px
}
.pricing-box ul li:nth-child(even) {
  background: #fafafa
}
.pricing-table .pricing-box {
  padding: 0
}
.pricing-table .pricing-box+.pricing-box {
  border-width: 1px 1px 1px 0;
  border-radius: 0
}
.pricing-table .pricing-box+.pricing-box:nth-child(2):last-child {
  border-width: 1px 1px 1px
}
.pricing-table .pricing-box .pricing-title,
.pricing-table .pricing-box .pricing-specs {
  margin: 0;
  border-bottom: #eee solid 1px;
  border-radius: 0
}
.pricing-table .pricing-box .pricing-specs span {
  font-size: 40px
}
.pricing-table .pricing-box .pricing-specs span sup {
  font-size: 20px;
  margin-left: -10px;
  padding-right: 5px
}
.pricing-table .pricing-box .pricing-specs i {
  color: rgba(0, 0, 0, .5)
}
.pricing-table .pricing-best {
  position: relative;
  z-index: 15;
  margin-right: -1px;
  margin-left: -1px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1)
}
.pricing-table .pricing-best .pricing-specs {
  background: #fafafa
}
.pricing-table .pricing-best .pricing-title {
  font-size: 28px;
  line-height: 60px;
  height: 90px;
  margin: -25px -1px 0
}
.pricing-box-alt {
  position: relative
}
.pricing-box-alt .col-md-3 {
  padding: 0;
  border: #c6c6c6 solid 1px;
  border-width: 1px 1px 1px 0;
  width: 26%;
  text-align: center
}
.pricing-box-alt .plans-features {
  width: 22%;
  text-align: right;
  border-color: transparent #c6c6c6 transparent transparent
}
.pricing-box-alt .plans-features .plan-header {
  height: 170px
}
.pricing-box-alt .plans-features ul li {
  border-left: #f0f0f0 solid 1px
}
.pricing-box-alt ul {
  list-style: none;
  margin: 0;
  padding: 0
}
.pricing-box-alt .plan-header {
  padding: 15px;
  border-bottom: #f0f0f0 solid 1px
}
.pricing-box-alt .plan-header h4 {
  margin: 0;
  color: #f26b33;
  text-transform: uppercase;
  font-size: 17px;
  font-weight: bold;
  height: 40px;
  line-height: 30px;
  border-bottom: #f3f3f3 solid 1px
}
.pricing-box-alt .plan-header .plan-price {
  font-size: 45px;
  font-weight: 100;
  height: 60px;
  line-height: 65px;
  margin: 0 0 5px
}
.pricing-box-alt .plan-header .plan-price small {
  font-size: 30px;
  opacity: .4;
  padding-right: 3px
}
.pricing-box-alt .studio-plan .plan-header h4 {
  color: #32cf4e
}
.pricing-box-alt .unlimited-plan .plan-header h4 {
  color: #3792f2
}
.pricing-box-alt ul li {
  height: 32px;
  line-height: 32px;
  padding: 0 10px;
  border-bottom: #f0f0f0 solid 1px;
  color: #0093d9;
  font-size: 14px;
  font-weight: bold
}
.pricing-box-alt .plans-features ul li {
  color: #6f6f6f;
  font-weight: normal
}
.pricing-box-alt ul li .feature-included,
.pricing-box-alt ul li .feature-excluded {
  border-radius: 30px;
  width: 12px;
  height: 12px;
  display: inline-block
}
.pricing-box-alt ul li .feature-excluded {
  background: #e6e6e6
}
.pricing-box-alt .pricing-btn {
  padding: 15px;
  background: #fafafa
}
.pricing-box-alt .pricing-btn .btn {
  padding: 15px 0;
  font-weight: bold;
  font-size: 16px;
  box-sizing: initial;
  display: block;
  line-height: 1
}
.pricing-box-alt .pricing-btn .btn b {
  opacity: .6;
  display: block;
  padding: 6px 0 0;
  font-size: 13px;
  font-weight: normal
}
.individual-plan .pricing-btn {
  border-left: #c6c6c6 solid 1px;
  margin-left: -1px
}
.pricing-box-alt ul li.header {
  background: #f9f9f9;
  text-transform: uppercase;
  font-weight: bold;
  text-align: right;
  font-size: 12px;
  color: #000
}

<div class="container">
  <div class="row pricing-table mrg10A ">
    <div class="row clear-both">
      <div class="pricing-box col-sm-4">
        <ul>
          <li>
            <p>Basic functions to plan and monitor your business</p>
          </li>
          <li>
            <p>Create up to 40 of your won lists</p>
          </li>

          <li>
            <p>Create up to 1 custom list</p>
          </li>
          <li>
            <p>You can invite 5 to 10 users additionaly</p>
          </li>

        </ul>
      </div>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

CSS

以前我的风格一样。但字体不重叠。现在字体重叠了。这里我附上了一张图片供参考。

enter image description here

应用以下样式后,字体不重叠。 这个问题的原因是什么?

0 个答案:

没有答案