Question

我在锚标签中有一个img标签。 ancher标签位于div标签内。我正在使用img标签的alt属性。 alt属性的值是长度为68个字符的文本。我的问题是alt属性值（文本）超出了div＆amp;它隐藏在IE中。我的意思是在显示几个字符后，通常会隐藏或裁剪休息字符。这是我的html代码段。

<div class="products">
    <div class="prod-image"  id="catEntryImage">
        <div class="prodClass" id=WCCE>
           <a><img alt="some text total around 70 character" src="someURL"/></a>
           <P class=gasCode></P>
        </div>
   </div>
   <div class="prod-content"></div>
   <script type="text/javaScript"></script>
</div>

给定html代码段的CSS

div {
    line-height: 1.4em;
    word-break: break-all;
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    font-family: arial, helvetica, sans-serif;
    font-size: 100%;
}

img {
    text-decoration: none;
    border:0;
}

a {
    color: #e10014;
    text-decoration: none;
    font-size: 1.2em;
}
.products .prod-image {
    width: 135px;
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
    text-align: center;
    vertical-align: bottom;
    overflow: hidden;
    max-height: 250px;
    overflow: hidden;
}
.products .prod-content {
    width: 288px;
    float: left;
    margin-bottom: 20px;
    text-align: left;
    vertical-align: bottom;
}

我应用了自动换行＆amp; amp; line-break css属性为alt属性的图像，但它也没有用。任何人都可以帮助我吗？这只发生在IE中。如果我使用＆＃34; word-break：break-all＆＃34; img标签的css属性比它在chrome中工作得好，但在IE中不起作用。

Answer 1

您只需在图片的父级height上设置width和.prodClass，并在height上设置width和<img> {1}} alt应该照顾好自己。

https://jsfiddle.net/Lu3tu98b/5/

<div class="prodClass">
     <a>
        <img alt="This will contain a really long sentence with more than 70 characters right here." src="someURL"/>
    </a>       
</div>

.prodClass {
    height: 150px;
    width: 150px;
    background-color: wheat;
}

.prodClass img {
    background-color: pink;
    width: 100%;
   height: 100%;
}

Answer 2

请浏览我的JSFIddle，我希望这正是您想要实现的目标。

我创建了两个单独的images，其中包含大alt个文字。

HTML：

<a class="a1"><img alt="some text total around 70 character some text total around 70 character some text total around 70 character some text total around 70 character some text total around 70 character" src="someURL"/></a>

<a class="a2"><img alt="some text total around 70 character some text total around 70 character some text total around 70 character some text total around 70 character some text total around 70 character" src="someURL"/></a>

CSS：

.a1{
     text-decoration: none;
    border:0; 
    width:270px; 
    word-break:break-all; 
    height:auto;
    display: block;
   }

.a2{
   text-decoration: none;
   border: 0px none;
   width: 270px;
   word-break: break-all;
   height: auto;
   text-overflow: ellipsis;
   overflow: hidden;
   display: block;
   white-space: nowrap;
 }

在第一个image上，我使用word-break:break-all来破解alt包装内的img文本。而在后一个版本中我使用text-overflow:ellipsis来隐藏额外的alt文本，当它超出img包装时。

Answer 3

使用它。

 <!--[if IE]><style type="text/css"> img{width:100px}</style><![endif]-->

这应该欺骗IE问题..

也在IE风格中指定此项。所以不会影响其他浏览器工作..

喜欢：

//start session - have to be only once 
session_start();

//create session variable - in your word create individual session and assign variable 
$_SESSION['session_name'] = "name";
$_SESSION["session_name"]["variable1"] = $variable1_value;
$_SESSION["session_name"]["variable2"] = $variable2_value;

//unset individual session variable - in your word logout individual session
unset($_SESSION['session_name']);

要处理IE 11问题：请参阅此old post

Answer 4

只是风格

img { color: red; }

用于alt标记文本样式

如何为img标签的alt属性编写css（word-break：break-all属性不能在IE中工作）

4 个答案: