Question

我有一个按钮，里面有一个图像和一个分隔符。 html代码如下：

<button class="uiImageButton" id="btFactors" style="flex:1 1 0px;" type="button">
  <img id="btFactorsImgID" style="vertical-align: bottom;" src="">
  <div class="uiImageButtonSeperator">Factors/Formulas</div>
</button>

和css：

.uiImageButton {
    border: 1px solid;
    padding: 0px;
    border-color: #007AC3;
    background-color: white;
    color: #007ac3;
    text-align: left;
    height: 23px;
    width: 100%;
    font-size: 14px;
    font-family: Muli-Light;
}

.uiImageButtonSeperator {
    border-left: 1px solid lightgrey;
    padding-left: 4px;
    vertical-align: bottom;
    display: inline;
    margin-left: 1px;
    margin-right: 2px;
}

我面临的问题是，在Internet Explorer中查看页面时，按钮内的图像被切断（图像位于按钮底部，部分图像被切断）。使用Chrome时它看起来像鳍... 我还发现在将这行代码添加到类uiImageButton

时

display: flex;

它给出的结果接近于我想要得到但不够接近的结果。

如果有人能解释为什么我只在IE中遇到这个问题以及如何正确解决这个问题，那将会很棒。

Answer 1

我不明白问题是什么。

只需使用此代码制作按钮即可。没有flexbox，没有其他样式和包装。并且与IE完美配合。

Jsfiddle

.button {
  /* no specific styles needed */
  background: blue;
}

.button__image {
  display: inline-block; /* to be on one line with text */
  width: 10px; /* don't forget sizes for your image */
  height: 10px;
  margin-right: 10px;
}

.button__text {
  font-size: 3em; /* just for fun */
  vertical-align: middle; /* set image to vertical center */
}

<button class='button'>
  <img class='button__image' src='http://i.imgur.com/jB0PDw1.png'>
  <span class='button__text'>Factors/Formulas</span>
</button>

仅当使用Internet Explorer时，按钮内的图像才会被切断

1 个答案: