測試了一下,ReportViewer 2008在跨瀏覽器方面問題挺多。

例如報表工具列,只有在IE下可以完整顯示,線上列印功能要動用ActiveX Control,所以IE以外的瀏覽器無法使用天經地義。但測試下來,在IE以外的瀏覽器上仍然有些其他問題要克服...

在非IE瀏覽器裡,即使ReportViewer Width、Height指定100%,也只能顯示一小塊。

我發現是<table id="ctl00_ContentPlaceHolder1_ReportViewer1" cellspacing="0" cellpadding="0" style="display: inline-block; height: 100%; width: 100%;">裡inline-block搞的鬼,由於它不是標準CSS,在非IE瀏覽器上就爆炸了。我想到一個解決方法是在ReportViewer外包一個<div id="dvWrapper">,再用jQuery("#dvWrapper table:first").css("display", "")可以解決這個問題。但好戲在後頭...

在Firefox裡還OK的報表工具列,到了Chrome、Safari裡就爛掉了,在Opera裡工具列是好的,但報表的標題列是壞的。

過關的有: IE, Firefox, Opera

壞掉的有Chrome, Safari,原本應該一列的工具列硬生生被拆成三列...

追了一下,問題出在這段CSS的詮釋:

<div style="display:inline;">DIV1</div> <table style="display:inline;"> <tr><td>Table1</td></tr> </table> <div style="display:inline;">DIV2</div>

關鍵在於,當<div>、<table>宣告display:inline時,是否還該維持強制換行? 我不是CSS專家,不知誰對誰錯,但至少在這個案例中,不再是IE一國,其他瀏覽器一國,IE所在的一方,票數還略勝一籌哩!!

【結論】採用ReportViewer時,還是乖乖用IE就好,不要想太多~~


Comments

# by Maxi

Javascript 跨所有browser的確是一個很大的挑戰. 話說chrome和opera是現時對CSS支持度最高的browser. 但很多東西到了chrome和opera卻又會爛掉 更詭異的是Javascript是ECMA-262標準卻又不能跨 所以標準這東西嘛...

# by Davis

我的ReportViewer在FF上面,工具列的顯示可以說是不正常,但報表本體卻還滿OK的!想不到他對瀏覽器這麼挑 ... 應該要針對目標瀏覽器做適當的輸出才是~ 還是說這是綁IE用的呢?XD

# by Ravon

暗黑大我也發現這行有問題<table id="ctl00_ContentPlaceHolder1_ReportViewer1" cellspacing="0" cellpadding="0" style="display: inline-block; height: 100%; width: 100%;"> 可是我的不會變成height: 100%; width: 100%;耶 請教一下前輩是怎麼設定的啊?

# by Jeffrey

to Ravon, 你加一下CSS設定: html, body { height: 100%; }看看狀況有沒有改善?

# by Ravon

to Jeffery,謝謝 還是一樣耶 請問有其他建議嗎

# by DJ

IE browser can't read %. you can only give it a pixel value.

# by Jeffrey

to DJ, 有點好奇,IE應該可以使用CSS height: 100%才對,不知可否再提供更詳細無法使用的案例,我蠻想研究看看。

# by SMJ

請問您們有碰過 Reporting service 報表,使用chrome 開啟時日期 ICONE 會不見??

Post a comment