只有使用Internet Explorer时，图像内部的按钮才会被切断。

-1

我有一个按钮，里面有图像和分隔符。的HTML代码如下：只有使用Internet Explorer时，图像内部的按钮才会被切断。

<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中遇到这个问题，以及如何正确解决这个问题，那将会很棒。

来源

2016-12-15 itay312

ü可以创建一个演示？我不能重现一个错误https://jsfiddle.net/6y26r9jv/ – 3rdthemagical

好吧我重新创建它：https://jsfiddle.net/w4hjpz7o/请用IE打开这个 – itay312

我不明白你在努力实现什么。图像被切断的方式是什么？它在示例中没有src，因此不可见。当我放入src时，它显示得非常好，至少如果它小于按钮的高度。因此，重复一遍，你试图达到什么目的（这不能通过简单地去除按钮的高度限制来完成）？ –

我不明白是什么问题。

只需使用此代码来制作按钮。没有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>

来源

2016-12-16 06:58:53 3rdthemagical

谢谢，我看到这个作品。我也想知道为什么这里的代码https://jsfiddle.net/w4hjpz7o/在IE中不工作（它削减文本）我只想知道原因，所以我会从中学习。 – itay312

@ itay312因为映像的'src'属性是空的，它没有任何大小。要修复它，请填写'src' attr并设置图像的宽度和高度。 – 3rdthemagical

好的，谢谢@ 3rdthemagical，我会试试这个。 – itay312

只有使用Internet Explorer时，图像内部的按钮才会被切断。

回答

相关问题