2012-06-01 30 views
6

在我的發展environemnt一切都顯得非常好,我有一個餅圖,它使用畫布和動畫時,通過瀏覽器託管時顯示得很好。主持ASP.Net與HTML5 JS和Twitter Bootstrap格式不同

我也使用Twitter Bootstrap,並在頁面頂部有一個導航欄,它有兩個項目。

下面是一些例子:

開發環境

http://i.stack.imgur.com/TtC5J.png

託管在IIS

http://i.stack.imgur.com/DNLkg.png

駁回IIS版本後,誤差保持不變,你也可以注意到按鈕的舍入不完全相同。

我們使用默認設置在IIS6上進行託管,因此想知道是否需要在網站上進行任何操作才能正確地組裝這些內容?我沒有在任何地方註冊.LESS,我不這麼認爲,如果這可能導致這種情況。

在此先感謝。

+0

你正在查看他們在同一個瀏覽器?一個看起來像IE9 +(帶圓角),另一個看起來像舊版本。 – Terry

+0

完全一樣的瀏覽器。 – LukeHennerley

+0

您是否收到任何客戶端腳本或呈現錯誤? – Terry

回答

5

您需要設置X-UA兼容元標記才能解決此問題。 將下面的元標記添加到您網頁的標題中,並且應該解決問題

這將確保它在開發和IIS中看起來是一樣的。 (使用相同的瀏覽器)

<meta http-equiv="X-UA-Compatible" content="IE=Edge"> 

你也可以在你的web.config中添加以下指令添加自定義標題應用廣泛,而不是每頁的meta標籤。

<?xml version="1.0" encoding="utf-8"?> 
<configuration> 
    <system.webServer> 
     <httpProtocol> 
     <customHeaders> 
      <clear /> 
      <add name="X-UA-Compatible" value="IE=Edge" /> 
     </customHeaders> 
     </httpProtocol> 
    </system.webServer> 
</configuration> 

,因爲IE在默認情況下呈現在兼容性作案Intranet站點此行爲引起的。 (因爲微軟認爲很多Intranet站點已經過時了,我猜) 你可以通過轉到工具 - >兼容性視圖設置來修改這個。

參考文獻:

+0

人們甚至可以使用'chrome = 1' [如此處所述](http://www.chromium.org/developers/how-tos/chrome-frame-getting-started/#TOC-Making-Your-Pages-Work -With-Google-Chrome-Frame)或檢查[msdn文檔](http://msdn.microsoft.com/library/cc288325.aspx)。 – Sherbrow

+0

完美!這對我有效。對於其他參考,這裏是[與X-UA兼容的文檔](http://msdn.microsoft.com/en-us/library/cc288325(v = vs.85).aspx)。 –

+0

令人驚歎!它現在只是炒作謝謝+1給出 – Nayef

1

聽起來像你正在使用LESS,是否正確?如果是這樣,就像你提到的那樣,如果你使用那些需要LESS的功能,你需要在IIS中設置它來使用twitter boostrap

我遇到過與IIS類似的問題,並且它在IIS中不是默認值時能夠正確識別文件擴展名。

有機會,你本地主機並不像保護有關文件映射,或者您使用本地不同版本的IIS比IIS6和它已經允許.LESS擴展。

要解決此問題,您需要將擴展​​/映射添加到IIS6。

短版

  • 開放的Web應用程序性能
  • 點擊配置...
  • 映射選項卡,單擊添加
  • 可執行:輸入相同的價值th at設置爲Mappings標籤下的ASPX擴展
  • 分機:。少
  • 動詞:檢查:限制爲,輸入:GET,HEAD
  • 腳本引擎:經過
  • 確認文件是否存在:未覈對

圖形版本,如果幫助任何人:這裏有一個鏈接,其中包含我在下面轉載的細節,以防它消失。

http://wiki.uiowa.edu/display/~mbergal/2012/06/08/Configuring+IIS+6+to+support+dotlesscss+(LESS+CSS)

轉到網站的屬性。

enter image description here

打開配置

enter image description here

添加擴展

enter image description here

enter image description here