呈現的問題在Chrome中使用CSS邊框樣式

Rendered upgrade table

我有一些JavaScript代碼，凸顯了當前計劃的用戶是，如果他們升級或降級這就改變。

當升級按鈕被點擊和頁面呈現它產生有害的副作用，如下圖所示：

Upgrade table

這幾乎就像它是否適用額外border-top到所有其他<td>標籤。現在當我刷新頁面時，它可以正常工作。當我沒有添加border-right和border-left屬性時，爲了增加混淆，當按下「升級」或「降級」按鈕時，它可以正常工作。

Upgrade table without border right and left

我已經在Firefox和Safari瀏覽器也進行了測試，火狐使得它不錯，但它仍然生產在Safari中有害的副作用。

有誰知道這是爲什麼？

$('#' + params['current_plan']).addClass('current_pricing_plan');` 
$(".current_pricing_plan button").prop("disabled", true);` 

.current_pricing_plan { 
border-bottom: 2px solid #00a6cd!important; 
border-left: 2px solid #00a6cd; 
border-right: 2px solid #00a6cd; 
border-top: 2px solid #00a6cd!important; 
background-color: #f4f4f4; 
}

第一個代碼塊是JS和第二個是CSS，我使用的Rails所以繼承人在html.erb文件<tr>的中的一個的例子。

<tr id="750" class="current-pricing-plan"> 
    <td><strong>£25</strong><span class="smalltxt"> /month</span></td> 
    <td><strong>750</strong><span class="smalltxt"> mins&nbsp;included</span></td> 
    <td><strong>4p</strong><span class="smalltxt"> /min&nbsp;thereafter</span></td> 
    <td class="last-col"> 
    <button class="btn smallbtn confirm_opener_750-25"> 
    <span class="hidetextmobile"></span> 
    <% if @account.billing_plan.inclusive_minutes > 750 %> 
     <span class="your-plan">Downgrade</span><span class="your-plan-none">Your Plan</span> 
    <% else %> 
     <span class="your-plan">Upgrade</span><span class="your-plan-none">Your Plan</span> 
    <% end %> 
    </button> 
</td> 
</tr>

來源

2013-07-26 Arran Scott

添加您的標記和JS功能有助於。 –

'StackOverflow！= Flicker';請準備一個小提琴（[更好]（http://jsfiddle.net/））或發佈相關的唯一CSS和HTML（最小） –

請注意，如果您直接在窗口中粘貼標記，它將不會出現。請縮進四個空格以確保格式正確。 –

更好的取代你border與outline屬性。

.current_pricing_plan { 
outline: 2px solid #00a6cd!important; 
}

來源

2013-07-26 11:52:35 Praveen

作品很贊，謝謝！ –

@ArranScott我很高興能夠提供幫助。 – Praveen

這太棒了，謝謝你的提示！ – user2163224

呈現的問題在Chrome中使用CSS邊框樣式

回答

相關問題