0

私は小さな問題を抱えていて、しばらくの間私を悩ませていました.私が試した限り、私はできませんでした. 問題自体は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) での表示は次のとおりです。

http://jsfiddle.net/vpF27/

親の幅は、親コンテナの幅に関係なく、子の幅を合わせたものにしか伸びませんが、IE7と彼の兄を散歩して場所を破壊し、それを決定します

.roomsLeft

親全体、任意の親を満たす必要があります。

今、私は自分のプロジェクトのコンテキストから犯人を取り除き（干渉している可能性のある他のアイテムから遠ざけ）、cssとhtmlを別のファイルで実行して、問題を絞り込もうとしましたが、残念ながらこれはうまくいきませんでした '何も解決しない場合、問題は引き続き発生します。

皆さんが提供できるどんな助けも素晴らしいでしょう。

ありがとうございました。

編集: うまくいけば、このフィドルは IE7 の内部で何が起こっているかについてもう少しコンテキストを提供します。他のすべてのブラウザで、追加

display:block;

に

.roomsLeft

問題を解決します

4

1 に答える 1

0

この方法を試してください：

.button { display:inline-block; *display:inline; zoom:1;  /*float:right;*/ }

JSFiddle

float を削除し、display-inline-block で変更します。要素のhtml配置を切り替えます。

于 2013-08-04T11:23:37.880 に答える