Question

我已经做到了：

#basketLinkId .buttonCart {
  padding-top: 8px; 
  padding-right:17px;
  padding-bottom:12px;
  padding-left:5px;
  border-radius: 6px;
  color: #fff;
  text-decoration: none;
  background-color: #28a8e0;
  float: right;
  position: relative;
  height:10px;
}

#itemCountForCart{
  font-size:9pt;
}

.cartCornerIcon, .cartCornerTextBestellen {
  display: inline-block;
  font-size:10pt;
  margin-left:0.20em;
}
#basketLinkId .svgCartIcon {
  width: 36px;
  height: auto;
  vertical-align: middle;
}
#itemCountForCart {
  position: absolute;
  top: 10px;
  left: 16px;
  min-width: 2rem;
  text-align: center;
}

<a href="#" class="cartLinkClass" id="basketLinkId">
  <div class="buttonCart">
    <div class="cartCornerIcon">
      <!-- svg image to code : https://jakearchibald.github.io/svgomg/ -->
      <svg class="svgCartIcon" xmlns="http://www.w3.org/2000/svg" width="141px" height="88px" viewBox="0 0 6.7884028 298.54643"><path d="m 241.22792,213.72354 -282.900379,0 -118.939781,-189.976486 -73.82728,0 0,-23.7470599713325 96.06009,0 L -19.442559,189.97648 l 260.670479,0 M 52.037289,263.61893 c 0,19.28289 -15.64461,34.9275 -34.9275,34.9275 -19.2828876,0 -34.927498,-15.64461 -34.927498,-34.9275 0,-19.28289 15.6446104,-34.9275 34.927498,-34.9275 19.28289,0 34.9275,15.64461 34.9275,34.9275 z m 179.627041,0 c 0,19.28289 -15.64461,34.9275 -34.9275,34.9275 -19.28289,0 -34.9275,-15.64461 -34.9275,-34.9275 0,-19.28289 15.64461,-34.9275 34.9275,-34.9275 19.28289,0 34.9275,15.64461 34.9275,34.9275 z"/></svg>
    </div>
    <div id="itemCountForCart"> 100 </div>

    <div class="cartCornerTextBestellen">Bestellen</div>

  </div>
</a>

在Chrome中，它看起来像这样：

在Firefox中就像这样：

但是在Internet Explorer中看起来像这样：

知道为什么会这样。另外，我怎样才能将“Bestellen”文本移动一下。因为如果我用边距移动它，图标也会移动，而我将它们分隔在不同的div中。

希望有人能帮我一点。谢谢。

Answer 1

Internet Explorer 9-11 has known issues with scaling SVG images，这可能是其中的副作用：

一般建议添加明确的高度和宽度属性，您可以尝试使用以下内容：

#basketLinkId .svgCartIcon {
  /* Setting explicit widths and heights can help rendering SVG issues */
  width: 36px;
  height: 20px;
  vertical-align: middle;
}

使用显式高度/宽度的示例

#basketLinkId .buttonCart {
  padding-top: 8px;
  padding-right: 17px;
  padding-bottom: 12px;
  padding-left: 5px;
  border-radius: 6px;
  color: #fff;
  text-decoration: none;
  background-color: #28a8e0;
  float: right;
  position: relative;
  height: 10px;
}
#itemCountForCart {
  font-size: 9pt;
}
.cartCornerIcon,
.cartCornerTextBestellen {
  display: inline-block;
  font-size: 11pt;
  margin-left: 0.20em;
}
#basketLinkId .svgCartIcon {
  width: 36px;
  height: auto;
  vertical-align: middle;
}
#itemCountForCart {
  position: absolute;
  top: 10px;
  left: 16px;
  min-width: 2rem;
  text-align: center;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>
</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <a href="#" class="cartLinkClass" id="basketLinkId">
    <div class="buttonCart">
      <div class="cartCornerIcon">
        <!-- svg image to code : https://jakearchibald.github.io/svgomg/ -->
        <svg class="svgCartIcon" xmlns="http://www.w3.org/2000/svg" width="141px" height="88px" viewBox="0 0 6.7884028 298.54643">
          <path d="m 241.22792,213.72354 -282.900379,0 -118.939781,-189.976486 -73.82728,0 0,-23.7470599713325 96.06009,0 L -19.442559,189.97648 l 260.670479,0 M 52.037289,263.61893 c 0,19.28289 -15.64461,34.9275 -34.9275,34.9275 -19.2828876,0 -34.927498,-15.64461 -34.927498,-34.9275 0,-19.28289 15.6446104,-34.9275 34.927498,-34.9275 19.28289,0 34.9275,15.64461 34.9275,34.9275 z m 179.627041,0 c 0,19.28289 -15.64461,34.9275 -34.9275,34.9275 -19.28289,0 -34.9275,-15.64461 -34.9275,-34.9275 0,-19.28289 15.64461,-34.9275 34.9275,-34.9275 19.28289,0 34.9275,15.64461 34.9275,34.9275 z"
          />
        </svg>
      </div>
      <div id="itemCountForCart">100</div>

      <div class="cartCornerTextBestellen">Bestellen</div>

    </div>
  </a>
</body>

</html>

IE Chrome和Firefox

1 个答案: