Apr
19
浏览器处理错误源图片时会有不同表现:
不说废话了，比如
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.eximg{
border:1px solid #f00;/*加上边框让问题更清晰*/
}
</style>
</head>
<img class="eximg" src="../nothing.jpg" width="50" height="50" alt="nothingisimposible" />
假设图片不存在，火狐不会像IE一样显示叉叉，而是用alt中的文字完全代替图片的位置。如果我们对图片的尺寸有要求（假设50高50宽），这时候alt属性就会撑开这个宽度或者高度，破坏整体布局。
另：去掉DOCTYPE之后，火狐也能像IE一样，加上DOCTYPE反而不一致了，不知道是火狐刻意还是疏忽。
一个小技巧可以修复这种问题，简单的：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.hidealt{
border:1px solid #f00;
height:50px;
width:50px;
overflow:hidden;/*溢出隐藏*/
display:inline-block;/*修改图片默认的Inline特性*/
}
</style>
</head>
<img class="hidealt" src="../nothing.jpg" width="50" height="50" alt="nothingisimposible" />
很好，很实用，又猛，又持久。