Chrome and Safari add 'border line' to img with css fixed height and width
I have a small problem with rendering a img tag with an associated with a class. I've recreated the issue with a simple html page.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test for image problem</title>
</head>
<body>
<style>
.image {
float: left;
cursor: pointer;
height:15px;
width:15px;
}
</style>
<p>This is a test </p>
<img class="image" id="image">
</body>
</html>
Anybod开发者_C百科y knows how to have the same behavior accross all browser ?
It's a broken image, as you specify no src. Point the src somewhere and the border goes away.
Browser rendering of broken images vary greatly cross-browser and depending on whether you include an alt attribute (which you always should). A 1px inner-border is commonly drawn in broken images in more than just Webkit. You should not deliberately include a broken or srcless image in your document. If you don't want a src, it shouldn't be an <img>.
Yup, Chrome and Safari does this to img tags without hrefs... Kinda stupid, but what you can do is make the img into an 'a', 'div', or 'span' tag up to you. Also might want to add "display: inline-block" to mimic html5 img tags. Hope this helps, it took me a while to find Bobince's answer.
加载中,请稍侯......
精彩评论