我有一个小问题,它一直困扰着我一段时间,尽管我已经尝试过,但我无法或我的生活在这里或通过谷歌找到解决它的解决方案。问题本身只存在于 IE7 中(我不确定 IE6 但我想说结果有点类似于 IE7)
这是我的标记:
<div class="roomsLeft">
<a href="#" class="selectProperty button">Select</a>
<span>Only 3 rooms left!</span>
</div>
这是上述标记的CSS:
.roomsLeft{
background:#fffed7;
border-radius:5px;
padding:1px;
margin:15px 0 0 0;
border:1px solid #ffd542;
margin-right:-3px;
width:auto;
display:inline-block;}
.roomsLeft span{
color:#555;
font-size:0.7em;
padding: 9px 8px 8px 8px;
display:inline-block;
width:auto;}
如果需要,按钮的 CSS:
.button {
font-family:tahoma;
background:#F70065;
background:-moz-linear-gradient(top,#fb458f 0%,#F70065 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fb458f),color-stop(100%,#F70065));
background:-webkit-linear-gradient(top,#fb458f 0%,#F70065 100%);
background:-o-linear-gradient(top,#fb458f 0%,#F70065 100%);
background:-ms-linear-gradient(top,#fb458f 0%,#F70065 100%);
background:linear-gradient(top,#fb458f 0%,#F70065 100%);
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#fb458f, endColorstr=#F70065 );
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#fb458f, endColorstr=#F70065 )";
padding:7px 9px;
color:#fff;
font-size:0.7em;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border:1px solid #DD005B;
font-weight:800;
text-decoration:none;
letter-spacing:0em;
text-shadow:1px 0px 5px #DD005B;
box-shadow:inset 0px 1px rgba(255,255,255,0.2);}
.button:hover {
background:#F70065;
background:-moz-linear-gradient(top,#fb458f 0%,#F70065 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fb458f),color-stop(100%,#F70065));
background:-webkit-linear-gradient(top,#fb458f 0%,#F70065 100%);
background:-o-linear-gradient(top,#fb458f 0%,#F70065 100%);
background:-ms-linear-gradient(top,#fb458f 0%,#F70065 100%);
background:linear-gradient(top,#fb458f 0%,#F70065 100%);
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#fb458f, endColorstr=#F70065 );
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#fb458f, endColorstr=#F70065 )";
padding:7px 9px;
color:#fff;
font-size:0.7em;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border:1px solid #DD005B;
font-weight:800;
text-decoration:none;
letter-spacing:0em;
text-shadow: 0 0 5px rgba(255,255,255,0.7);
box-shadow:inset 0px 1px rgba(255,255,255,0.2), 0 0 5px rgba(247, 0, 101, 0.5);}
以下是它在所有其他主要浏览器(IE8-10、Chrome、FF 和 Opera)中的样子:
无论父容器的宽度如何,父母的宽度都只会延伸到它的孩子的组合宽度,但是......在漫步 IE7 和他的哥哥们破坏了这个地方并决定
.roomsLeft
需要填写整个父母,任何父母。
现在我已经尝试将罪魁祸首从我的项目的上下文中移除(并远离任何其他可能干扰的项目)并在单独的文件中运行 css 和 html,希望缩小任何问题,但不幸的是这没有'什么都解决不了,问题依旧。
你们能提供的任何帮助都会很棒。
谢谢你。
编辑:希望这个小提琴能提供更多关于 IE7 内部正在发生的事情的背景信息。在所有其他浏览器中,添加
display:block;
至
.roomsLeft
解决问题