網頁用ie8開啟格式會怪怪的

html css

mayyola 2018-03-21 10:49:27 ‧ 8079 瀏覽

各位大大好:
我想請問用ie8格式會跑掉，想請問是甚麼原因呢?
可能是html格式(剛初調得有點久)像這種要怎麼做修改，謝謝
2018年、三月、星期跟天數格子都是先用div的格式包起來

<div class="check yellowtext" style="width:22.34cm;background-color:#AAAAAA;">

http://www.ee.nsysu.edu.tw/key/c1.php

看更多先前的討論...收起先前的討論...

froce iT邦大師 1 級 ‧ 2018-03-21 15:43:26 檢舉

為什麼你會在一個固定欄數的頁面，使用float呢？
這種的話，通常舊一點的前端會用table，每欄給固定百分比，新一點的會用div table甚至用flex去排，不過怎樣都不會讓他float。

ccutmis iT邦高手 2 級 ‧ 2018-03-21 16:21:31 檢舉

因為樓主可能只是剛好在學術單位，某位頭頭說要做就被拱出來做這個系統吧，又或者是學校作業，我猜 XD

mayyola iT邦研究生 2 級 ‧ 2018-03-21 18:13:55 檢舉

因為我是胡搞瞎搞,東湊西湊...才把表格弄好= =..完全沒考慮過f大的想法~

mayyola iT邦研究生 2 級 ‧ 2018-03-22 10:15:02 檢舉

想再詢問各位大大，若我同事的ie11(ie8也是連 opacity也無法顯示)不知道為啥點擊都無法跑出視窗來，想請問是甚麼問題謝謝

ccutmis iT邦高手 2 級 ‧ 2018-03-22 11:44:18 檢舉

沒法跑出視窗是指點了日期格子，沒法跳出modal視窗嗎?

ccutmis iT邦高手 2 級 ‧ 2018-03-22 11:46:12 檢舉

可以參考這個網址 https://github.com/twbs/bootstrap/issues/3672

mayyola iT邦研究生 2 級 ‧ 2018-03-22 12:56:30 檢舉

是的~我同事的ie11也會這樣，沒辦法跳出modal跟點標題也無法顯示詳細資料，但我的ie11跟別台都正常

ccutmis iT邦高手 2 級 ‧ 2018-03-22 13:49:09 檢舉

或者建議他的電腦灌一下Chrome ._. 我已經超過三年沒用I.E了XD

mayyola iT邦研究生 2 級 ‧ 2018-03-22 14:19:02 檢舉

me,too 謝謝@@

aaron3399 iT邦好手 1 級 ‧ 2018-03-22 20:15:06 檢舉

我用IE11看很正常啊~也能showmodal, 跟FF畫面一樣.
是不是他有放大系統字體?

mayyola iT邦研究生 2 級 ‧ 2018-03-23 08:40:32 檢舉

我用IE11也正常~不知道他的IE11有甚麼問題(問題跟IE8一樣)- _ - 他字體也正常

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

5 個回答

ccutmis

iT邦高手 2 級 ‧ 2018-03-21 12:07:27

最佳解答

我的建議是版型HTML結構整個打掉重練，以這個教室借用登記表為例，本身就是一張表格(table)，以語義化HTML來說，你把整個內容規畫成一個table，再把你寫好的程式邏輯套進去就完成了，寫成＜div＞包＜div＞這類為了排版需求而無視語義化HTML的基本原則，看到是蠻無言的 ._. 另外CSS裡面有看到你的width單位用cm(??)，如果是用於視覺呈現(電腦平板手機等)通常會用px,pc,%等，不會用cm,mm這種印刷用的單位。以下是一個簡單用＜table＞改寫的登記表demo，希望對您有所啟發。

HTM DEMO網址:
http://www.web3d.url.tw/d3/CalendarTableDemo.htm

<!doctype HTML>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>教室借用登記表</title>
<style>
*,html{font-family:'微軟正黑體',Arial;}
.calendarTable{width: 80%;border-collapse:collapse;margin:0 auto;}
.calendarTable tr th,.calendarTable tr td{padding:5px;border:solid 1px #fff;}
.calendarTable tr th{font-size:18px;}
.calendarTable tr td{font-size:12px;height:160px;vertical-align:top;}
.pinkBg{background-color:#FFE4E1;}
.grayBg{background-color:#DDD;}
.magBg{background-color:#FF69B4;}
.ltGyBg{background-color:#F5F5F5;}
.ltOrBg{background-color:#F5DEB3;opacity:0.5;}
.mdOrBg{background-color:#F5DEB3;}
.dkOrBg{background-color:#FFAA33;}
</style>
</head>
<body>
<table class="calendarTable">
<tr><th colspan="7" class="pinkBg">2018</th></tr>
<tr><th colspan="7" class="grayBg">三月</th></tr>
<tr>
	<th class="magBg">星期日</th><th class="grayBg">星期一</th><th class="grayBg">星期二</th>
	<th class="grayBg">星期三</th>	<th class="grayBg">星期四</th><th class="grayBg">星期五</th>
	<th class="magBg">星期六</th>
</tr>
<tr>
	<td class="ltGyBg"></td><td class="ltGyBg"></td><td class="ltGyBg"></td>
	<td class="ltGyBg"></td><td class="ltOrBg">[1]</td><td class="ltOrBg">[2]</td>
	<td class="pinkBg">[3]</td>
</tr>
<tr>
	<td class="pinkBg">[4]</td><td class="ltOrBg">[5]</td><td class="ltOrBg">[6]</td>
	<td class="ltOrBg">[7]</td><td class="ltOrBg">[8]</td><td class="ltOrBg">[9]</td>
	<td class="pinkBg">[10]</td>
</tr>
<tr>
	<td class="pinkBg">[11]</td><td class="ltOrBg">[12]</td><td class="ltOrBg">[13]</td>
	<td class="ltOrBg">[14]</td><td class="ltOrBg">[15]</td><td class="ltOrBg">[16]</td>
	<td class="pinkBg">[17]</td>
</tr>
<tr>
	<td class="pinkBg">[18]</td><td class="ltOrBg">[19]</td><td class="ltOrBg">[20]</td>
	<td class="dkOrBg">[21]</td><td class="mdOrBg">[22]</td><td class="mdOrBg">[23]</td>
	<td class="pinkBg">[24]</td>
</tr>
<tr>
	<td class="pinkBg">[25]</td><td class="mdOrBg">[26]</td><td class="mdOrBg">[27]</td>
	<td class="mdOrBg">[28]</td><td class="mdOrBg">[29]</td><td class="mdOrBg">[30]</td>
	<td class="pinkBg">[31]</td>
</tr>
</table>
</body>
</html>

PHP DEMO網址:
http://www.web3d.url.tw/d3/CalendarTableDemo.php

底下是用php繪制月曆table的簡單DEMO供您參考

<?php
$numofdays=date("t");
$first=date("Y-m") ."-". "1";
$day=strtotime($first);
$firstday= date("w",$day);
$hasdaystarted=false;
$dayscounter=0;
$numofdays=$numofdays+$firstday;
?>
<!doctype HTML>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>教室借用登記表</title>
<script src="http://ee.nsysu.edu.tw/key/bootstrap/js/jquery.min.js"></script>
<link rel="stylesheet" href="http://ee.nsysu.edu.tw/key/bootstrap/css/bootstrap.min.css">
<script src="http://ee.nsysu.edu.tw/key/bootstrap/js/popper.min.js"></script>
<script src="http://ee.nsysu.edu.tw/key/bootstrap/js/bootstrap.min.js"></script>
<script src="http://ee.nsysu.edu.tw/key/bootstrap/js/jquery-clockpicker.min.js"></script>
<link href="http://ee.nsysu.edu.tw/key/bootstrap/css/bootstrap-clockpicker.min.css" rel="stylesheet"/>
<script src="http://ee.nsysu.edu.tw/key/bootstrap/js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ee.nsysu.edu.tw/key/bootstrap/css/jquery-ui.min.css">

<style>
*,html{font-family:'微軟正黑體',Arial;}
.calendarTable{width: 80%;border-collapse:collapse;margin:0 auto;}
.calendarTable tr th,.calendarTable tr td{padding:5px;border:solid 1px #fff;}
.calendarTable tr th{font-size:18px;text-align:center;}
.calendarTable tr td{font-size:12px;height:160px;vertical-align:top;}
.pinkBg{background-color:#FFE4E1;}
.grayBg{background-color:#DDD;}
.magBg{background-color:#FF69B4;}
.ltGyBg{background-color:#F5F5F5;}
.ltOrBg{background-color:#F5DEB3;opacity:0.5;}
.mdOrBg{background-color:#F5DEB3;}
.dkOrBg{background-color:#FFAA33;}
</style>
</head>
<body>
<table class="table calendarTable">
<tr><th colspan="7" class="pinkBg"><?php echo date("Y");?></th></tr>
<tr><th colspan="7" class="grayBg"><?php echo date("F");?></th></tr>
<tr>
	<th class="magBg">星期日</th>
	<th class="grayBg">星期一</th>
	<th class="grayBg">星期二</th>
	<th class="grayBg">星期三</th>
	<th class="grayBg">星期四</th>
	<th class="grayBg">星期五</th>
	<th class="magBg">星期六</th>
</tr>
<tr>
<?php
for($I=0; $I<$numofdays; $I++){
	if($I==$firstday) $hasdaystarted= true;
	if($hasdaystarted){
		$dayscounter++;
		$tmpFullYMD=date("Y-m-").$dayscounter;
		echo "<td class='ltOrBg change' data-toggle='modal' data-target='#exampleModal' data-whatever='@mdo' id='$tmpFullYMD' value='$tmpFullYMD'>[$dayscounter]</td>";
	}else{
		echo "<td class='ltGyBg'></td>";
	}
	if(($I+1)%7==0) echo "</tr><tr>";
}
?>
</tr>
</table>

<div class="modal fade " id="exampleModal"  role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">  
  <div class="modal-dialog" role="document">
    <div class="modal-content">
        
        
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      
      <div class="modal-body">
             <div class="form-row">
          
          <div class="form-group col-md-6 " >
            <label for="recipient-name" class="col-form-label" >姓名:</label>
            <input type="text" class="form-control" id="name">
          </div>
         
          <div class="form-group col-md-6 " >
            <label for="recipient-name" class="col-form-label" >實驗室編號:</label>
             <input type="text" class="form-control" id="lab" value="EC">
          </div>       
          
        </div>
        
             <div class="form-row">
          
          <div class="form-group col-md-6 "  >
            <label for="recipient-name" class="col-form-label" >分機/電話:</label>
            <input type="text" class="form-control" id="phone">
          </div>
         
          <div class="form-group col-md-6 " >
            <label for="recipient-name" class="col-form-label" >借用教室編號:</label>
             <input type="text" class="form-control" id="clr" value="EC">
          </div>       
          
        </div>
          
         <div class="form-group">
            <label for="message-text" class="col-form-label" >事由:</label>
            <textarea class="form-control" id="thing"></textarea>
          </div>
      
      <div class="form-row">
      
        <div class="input-group clockpicker" style="width: 50%; float:left;" >
        <label for="message-text" class="col-form-label" >開始時間:</label>
        <input type="text" class="form-control" value="08:00" id="timest" data-toggle="popover" data-placement="top" title="注意!" data-content="開始時間不能大於結束時間" data-trigger="focus"   onchange="timeprefer()">
        <span class="input-group-addon">
        <span class="glyphicon glyphicon-time"></span>
        </span>
        </div>
        
        <div class="input-group clockpicker1" style="width: 50%; float:right;" >
        <label for="message-text" class="col-form-label" >結束時間:</label>
        <input type="text" class="form-control" value="09:00" id="timeov" data-toggle="popover" data-placement="top" title="注意!" data-content="結束時間不能小於開始時間" data-trigger="focus" onchange="timeprefer()">
        <span class="input-group-addon">
        <span class="glyphicon glyphicon-time"></span>
        </span>
        </div>
        </div>      
      </div>
      
     
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" id="send" class="btn btn-primary" onclick="myFunction()">Send message</button>
        
      </div>
    
    </div>
  </div>
</div>
</html>

php範例下載:
http://www.web3d.url.tw/d3/CalendarTableDemo.txt

php月曆部份我是找網路上範例簡單修改的，樓主要視自己php程式裡面月曆去作應變(看的懂源碼應該就沒問題)，原本想把db串接讀寫部份做個demo，但是看到樓主的原始網頁那一大串js我就卻步了，感覺是把簡單事複雜化._.

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

mayyola iT邦研究生 2 級 ‧ 2018-03-21 15:37:02 檢舉

CC大好:但是如果進入日期，要怎麼用迴圈分一排7個表格分6週? 謝謝

ccutmis iT邦高手 2 級 ‧ 2018-03-21 16:09:10 檢舉

我有在本文裡回覆php範例了，您可以右鍵下載參考看看，主要在#53~#63行這邊作 tr td... /tr 的處理

ccutmis iT邦高手 2 級 ‧ 2018-03-21 16:45:10 檢舉

對了"要怎麼用迴圈分一排7個表格分6週?"
不是分一排７個表格而是
＜tr＞＜td＞1＜/td＞...＜td＞6＜/td＞＜td＞7＜/td＞＜/tr＞
這樣一列算一週，基本的html語法要去w3School熟悉一下

mayyola iT邦研究生 2 級 ‧ 2018-03-21 18:11:11 檢舉

謝謝cc大~

登入發表回應

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2018-03-21 11:44:44

ie9之前的版本，對於寬度(width)的定義表現並不太一樣。
簡單來講就是外距會計算跟不計算的問題。
所以你使用了float做排版，在寬度不夠的情況下就會換行。
而在ie9之前的版本，width的計算值永遠都會再多1個px的樣子。也就是這個1px讓你的寬度不足。

簡單來說，如果想要跟ie之前的版本相容的情況下。你css下的工夫還不夠。

這邊我會給你兩種建議。一種是採用寬度%來處理。
另一種就是採用 display: table-????? 這個div表格宣告處理。不要用float。
最後最簡單的就是直接用table來處理吧。

回應 2
分享
檢舉

ccutmis iT邦高手 2 級 ‧ 2018-03-21 12:08:38 檢舉

mayyola iT邦研究生 2 級 ‧ 2018-03-21 18:14:15 檢舉

謝謝~

登入發表回應

小魚

iT邦大師 1 級 ‧ 2018-03-21 11:56:53

有人說
你要我寫個簡單的網頁2萬元,
寫網頁相容IE9以上5萬元,
寫網頁相容IE8以前10萬元,
(價錢是我隨便說的,
不過意思大概是這樣)
總之就是,
基本上除非客戶有需求,
不要去看IE8以前的了,
如果客戶有需求,
你就跟他抬高價錢吧...

回應 8
分享
檢舉

看更多先前的回應...收起先前的回應...

ccutmis iT邦高手 2 級 ‧ 2018-03-21 12:08:15 檢舉

mayyola iT邦研究生 2 級 ‧ 2018-03-21 18:14:28 檢舉

謝謝~

小魚 iT邦大師 1 級 ‧ 2018-03-21 19:11:25 檢舉

其實會發生這樣的情況，
是因為微軟的老大哥心態，
因為灌Windows一定會灌IE，
微軟一直以為IE的市占率很高，
當CSS出來的時候，
微軟一直不想跟進堅持走自己的路，
但其實很多人像我一樣十年前就不用IE了，
只是擺在那邊當花瓶而已，
除了一些公家機關的網頁一定要用IE開以外。

一直到有一天微軟才突然發現自己的瀏覽器已經差人家很多了，
驚覺一定要有所改變，
所以從IE9開始才慢慢跟上CSS跟JS的步調，
到了IE11整體的支援度就比之前好很多了，
但是有些功能IE還是不支援的。

froce iT邦大師 1 級 ‧ 2018-03-21 21:37:21 檢舉

所以我痛恨死 asp web form 了，偏偏公司一堆舊網頁系統還是 asp web form 還只能相容舊ie。

小魚 iT邦大師 1 級 ‧ 2018-03-22 11:54:14 檢舉

這跟WebForm沒關係吧,
WebForm也可以支援CSS跟JS,
重點是IE...

froce iT邦大師 1 級 ‧ 2018-03-27 08:15:38 檢舉

不不，我看過太多用webform拉完就上線，在新版ie不開相容性檢視會跑版跑到誇張到不行，甚至用firefox可以看到隱藏的gridview的狀況了。

優悠 iT邦新手 3 級 ‧ 2018-03-27 15:51:25 檢舉

我看過太多用webform拉完就上線,這一句就知道沒設定CSS，會跑版都是CSS沒弄好。
webform也簡單也有難度的作法，簡單就隨意拉沒在管，進階一點都不會用內建控制器，都HTML原生，這樣套CSS才沒問題

小魚 iT邦大師 1 級 ‧ 2018-03-28 11:55:38 檢舉

內建控制器也是可以吃CSS的,
畢竟要變成Html還是要轉成Html標籤的,
只不過如果不想被WebForm綁死,
使用Html的標籤要轉成其他後端語言會更方便。

登入發表回應

純真的人

iT邦大師 1 級 ‧ 2018-03-21 13:48:46

看你設計的方式..
可以強制宣告IE使用的版本

參考
http://blog.darkthread.net/post-2016-05-26-x-ua-compatible-setting.aspx

回應 1
分享
檢舉

mayyola iT邦研究生 2 級 ‧ 2018-03-21 18:14:35 檢舉

謝謝~

登入發表回應

Darwin Watterson

iT邦好手 1 級 ‧ 2018-04-19 18:17:05

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
寫完整也有差喔 ! 細節可以去看 W3School教學 !
不過改 IE 相容的頁面真的 "難" "很難" "非常難" ! 畢竟連微軟都放棄它了 ! 記得幾年前, 中X在推銷Ezoapp時, 曾聽過當你灌好 Win 7 後, IE 只會使用一次-就是用來下載 Chrome, 然後 IE 就能刪掉了這個說法 ! XD