0

Twitter の Bootstrap CSS の一部を使用しているときに、VS2012 で奇妙な現象が発生しているようです。時折、私のアクションなしでボタンのスタイルが変更されているように見えます...

Bootstrap の元のコードは次のとおりです。

    .btn {
display: inline-block;
*display: inline;
/* IE7 inline-block hack */
*zoom: 1;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
text-align: center;
vertical-align: middle;
cursor: pointer;
color: #333333;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #e6e6e6;
/* Darken IE7 buttons by default so they stand out more given they won't have borders */
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
border: 1px solid #cccccc;
*border: 0;
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
*margin-left: .3em;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}

そして、これが(私が推測する).NETがそれに対して行っていることです:

btn {
display: inline-block;
*border-bottom: 0 none #b3b3b3; display: inline;
/* IE7 inline-block hack */
*zoom: 1;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
text-align: center;
vertical-align: middle;
cursor: pointer;
color: #333333;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
background-color: #f5f5f5;
background-repeat: repeat-x;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin-left: .3em;    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05); background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); /* Darken IE7 buttons by default so they stand out more given they won't have borders */

**border-left-style: none; border-left-color: inherit; border-left-width: 0; border-right-style: none; border-right-color: inherit; border-right-width: 0; border-top-style: none; border-top-color: inherit; border-top-width: 0; }

以前にこの問題を経験した人はいますか? ブートストラップに含まれる特定のハックに関連しているようですが、それを止めることはできないようです....

編集 10/07/13:

この動作は VS2010/12 のバグ/機能のようです...

Visual Studio (2012 以前) は CSS プロパティを削除します

私の現在の回避策は、css ファイルを .NET で開かないことです。これはひどい...

4

1 に答える 1

0

これは答えではありませんが、CSS ハックのブートストラップがブラウザーで使用するのが気に入らないという同じ問題があったため、それらの素敵なアイコンを使用してボタン部分を書き直しました。

ただし、ご覧のとおり、これはまだ LESS を使用しています。MSチームメンバーからの「Web Essentials 2012」を介してVS2012で利用できるもの

使用法

 <a class="button oval x-large black" href="/path"><i class="icon icon-ok-sign"></i> click here</a>

CSS

.icon {
    background: url("/content/bootstrap/img/glyphicons-halflings-white.png?@{timestamp}") no-repeat top left;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin: 0 0 1px 0;
    /*IE7 FIX */
    display: inline;
    display: inline-block;

    &.black { background: url("/content/bootstrap/img/glyphicons-halflings.png?@{timestamp}") no-repeat top left; }
    &.chat { background-position: 0 0; }
    &.mail { background-position: 0 -27px; }

    /* Bootstrap icons */
    &.icon-glass { background-position: 0 0; }
    &.icon-music { background-position: -24px 0; }
    &.icon-search { background-position: -48px 0; }
    &.icon-envelope { background-position: -72px 0; }
    &.icon-heart { background-position: -96px 0; }
    &.icon-star { background-position: -120px 0; }
    &.icon-star-empty { background-position: -144px 0; }
    &.icon-user { background-position: -168px 0; }
    &.icon-film { background-position: -192px 0; }
    &.icon-th-large { background-position: -216px 0; }
    &.icon-th { background-position: -240px 0; }
    &.icon-th-list { background-position: -264px 0; }
    &.icon-ok { background-position: -288px 0; }
    &.icon-remove { background-position: -312px 0; }
    &.icon-zoom-in { background-position: -336px 0; }
    &.icon-zoom-out { background-position: -360px 0; }
    &.icon-off { background-position: -384px 0; }
    &.icon-signal { background-position: -408px 0; }
    &.icon-cog { background-position: -432px 0; }
    &.icon-trash { background-position: -456px 0; }
    &.icon-home { background-position: 0 -24px; }
    &.icon-file { background-position: -24px -24px; }
    &.icon-time { background-position: -48px -24px; }
    &.icon-road { background-position: -72px -24px; }
    &.icon-download-alt { background-position: -96px -24px; }
    &.icon-download { background-position: -120px -24px; }
    &.icon-upload { background-position: -144px -24px; }
    &.icon-inbox { background-position: -168px -24px; }
    &.icon-play-circle { background-position: -192px -24px; }
    &.icon-repeat { background-position: -216px -24px; }
    &.icon-refresh { background-position: -240px -24px; }
    &.icon-list-alt { background-position: -264px -24px; }
    &.icon-lock { background-position: -287px -24px; }
    &.icon-flag { background-position: -312px -24px; }
    &.icon-headphones { background-position: -336px -24px; }
    &.icon-volume-off { background-position: -360px -24px; }
    &.icon-volume-down { background-position: -384px -24px; }
    &.icon-volume-up { background-position: -408px -24px; }
    &.icon-qrcode { background-position: -432px -24px; }
    &.icon-barcode { background-position: -456px -24px; }
    &.icon-tag { background-position: 0 -48px; }
    &.icon-tags { background-position: -25px -48px; }
    &.icon-book { background-position: -48px -48px; }
    &.icon-bookmark { background-position: -72px -48px; }
    &.icon-print { background-position: -96px -48px; }
    &.icon-camera { background-position: -120px -48px; }
    &.icon-font { background-position: -144px -48px; }
    &.icon-bold { background-position: -167px -48px; }
    &.icon-italic { background-position: -192px -48px; }
    &.icon-text-height { background-position: -216px -48px; }
    &.icon-text-width { background-position: -240px -48px; }
    &.icon-align-left { background-position: -264px -48px; }
    &.icon-align-center { background-position: -288px -48px; }
    &.icon-align-right { background-position: -312px -48px; }
    &.icon-align-justify { background-position: -336px -48px; }
    &.icon-list { background-position: -360px -48px; }
    &.icon-indent-left { background-position: -384px -48px; }
    &.icon-indent-right { background-position: -408px -48px; }
    &.icon-facetime-video { background-position: -432px -48px; }
    &.icon-picture { background-position: -456px -48px; }
    &.icon-pencil { background-position: 0 -72px; }
    &.icon-map-marker { background-position: -24px -72px; }
    &.icon-adjust { background-position: -48px -72px; }
    &.icon-tint { background-position: -72px -72px; }
    &.icon-edit { background-position: -96px -72px; }
    &.icon-share { background-position: -120px -72px; }
    &.icon-check { background-position: -144px -72px; }
    &.icon-move { background-position: -168px -72px; }
    &.icon-step-backward { background-position: -192px -72px; }
    &.icon-fast-backward { background-position: -216px -72px; }
    &.icon-backward { background-position: -240px -72px; }
    &.icon-play { background-position: -264px -72px; }
    &.icon-pause { background-position: -288px -72px; }
    &.icon-stop { background-position: -312px -72px; }
    &.icon-forward { background-position: -336px -72px; }
    &.icon-fast-forward { background-position: -360px -72px; }
    &.icon-step-forward { background-position: -384px -72px; }
    &.icon-eject { background-position: -408px -72px; }
    &.icon-chevron-left { background-position: -432px -72px; }
    &.icon-chevron-right { background-position: -456px -72px; }
    &.icon-plus-sign { background-position: 0 -96px; }
    &.icon-minus-sign { background-position: -24px -96px; }
    &.icon-remove-sign { background-position: -48px -96px; }
    &.icon-ok-sign { background-position: -72px -96px; }
    &.icon-question-sign { background-position: -96px -96px; }
    &.icon-info-sign { background-position: -120px -96px; }
    &.icon-screenshot { background-position: -144px -96px; }
    &.icon-remove-circle { background-position: -168px -96px; }
    &.icon-ok-circle { background-position: -192px -96px; }
    &.icon-ban-circle { background-position: -216px -96px; }
    &.icon-arrow-left { background-position: -240px -96px; }
    &.icon-arrow-right { background-position: -264px -96px; }
    &.icon-arrow-up { background-position: -289px -96px; }
    &.icon-arrow-down { background-position: -312px -96px; }
    &.icon-share-alt { background-position: -336px -96px; }
    &.icon-resize-full { background-position: -360px -96px; }
    &.icon-resize-small { background-position: -384px -96px; }
    &.icon-plus { background-position: -408px -96px; }
    &.icon-minus { background-position: -433px -96px; }
    &.icon-asterisk { background-position: -456px -96px; }
    &.icon-exclamation-sign { background-position: 0 -120px; }
    &.icon-gift { background-position: -24px -120px; }
    &.icon-leaf { background-position: -48px -120px; }
    &.icon-fire { background-position: -72px -120px; }
    &.icon-eye-open { background-position: -96px -120px; }
    &.icon-eye-close { background-position: -120px -120px; }
    &.icon-warning-sign { background-position: -144px -120px; }
    &.icon-smiley { width: 15px; background-position: -167px -120px; }
    &.icon-calendar { background-position: -192px -120px; }
    &.icon-paperclip { background-position: -217px -120px; }
    &.icon-comment { background-position: -240px -120px; }
    &.icon-magnet { background-position: -264px -120px; }
    &.icon-chevron-up { background-position: -288px -120px; }
    &.icon-chevron-down { background-position: -313px -119px; }
    &.icon-retweet { background-position: -336px -120px; }
    &.icon-shopping-cart { background-position: -360px -120px; }
    &.icon-folder-close { background-position: -384px -120px; }
    &.icon-folder-open { width: 16px; background-position: -408px -120px; }
    &.icon-resize-vertical { background-position: -432px -119px; }
    &.icon-resize-horizontal { background-position: -456px -118px; }
    &.icon-hdd { background-position: 0 -144px; }
    &.icon-bullhorn { background-position: -24px -144px; }
    &.icon-bell { background-position: -48px -144px; }
    &.icon-certificate { background-position: -72px -144px; }
    &.icon-thumbs-up { background-position: -96px -144px; }
    &.icon-thumbs-down { background-position: -120px -144px; }
    &.icon-hand-right { background-position: -144px -144px; }
    &.icon-hand-left { background-position: -168px -144px; }
    &.icon-hand-up { background-position: -192px -144px; }
    &.icon-hand-down { background-position: -216px -144px; }
    &.icon-circle-arrow-right { background-position: -240px -144px; }
    &.icon-circle-arrow-left { background-position: -264px -144px; }
    &.icon-circle-arrow-up { background-position: -288px -144px; }
    &.icon-circle-arrow-down { background-position: -312px -144px; }
    &.icon-globe { background-position: -336px -144px; }
    &.icon-wrench { background-position: -360px -144px; }
    &.icon-tasks { background-position: -384px -144px; }
    &.icon-filter { background-position: -408px -144px; }
    &.icon-briefcase { background-position: -432px -144px; }
    &.icon-fullscreen { background-position: -456px -144px; }
}

/* BUTTONS */
.button, .button:visited, .button:link {
    /*IE7 FIX */
    display: inline;
    display: inline-block;
    color: @button-one-text;
    text-decoration: none;
    font-variant: small-caps;
}

.button {
    background-color: @button-one;
    padding: 5px 15px;
    font-size: 12px;

    &:hover { background-color: @button-one-hover; }

    /* Size Variations */
    &.small { font-size: 11px; padding: 2px 10px; }

    &.large { font-size: 22px; padding: 10px 15px; }
    &.x-large { font-size: 30px; padding: 10px 15px; }

    /* Form Variations */
    &.rounded { border-radius: 5px; }

    &.oval { border-radius: 12px; }
    /* Color Variations */
    &.black {
        background-color: @button-two;

        &:hover { background-color: @button-two-hover; }
        &.member-false { background-color: @button-two-inactive; }
    }

    &.green {
        background-color: @button-three;

        &:hover { background-color: @button-three-hover; }
        &.member-false { background-color: @button-three-inactive; }
    }
}
于 2013-07-09T08:01:53.040 に答える