开发者

CSS box in Internet Explorer

I've a rendering problem to show a box with background image and border image in IE8 IE7 IE6

My code works in IE9, Safari, Firefox.

.myBox {
background : url(image-left.gif) left no-repeat,url(image-right.gif) right no-repea开发者_运维百科t, url(images-center.png) repeat-x;
height: 50px;
position:relative;
}

I've founded a solution to put left and right image in a table:

CSS:

table {
    height: 50px;
    position:relative;
}

.myBox {
    background : url(images-center.png) repeat-x; 
}

html:

<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td><img src="image-left.gif" /></td>

    <td>my content text</td>

    <td><img src="image-right.gif" /></td>
</tr>
</table>

Anyone have a better and elegant solution????


Here are two ways to do it

  • Cross-Browser Multi-background images, including IE, CSS way to do it (as claimed by adobe, haven't tried it myself..)
  • A jquery plugin to fix it, although from the comments i am not so sure it works in all cases

Of-course your method is valid just as well, although it causes you to change your markup..

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜