各位大大好:
我想請問用ie8格式會跑掉,想請問是甚麼原因呢?
可能是html格式(剛初調得有點久)像這種要怎麼做修改,謝謝
2018年、三月、星期跟天數格子都是先用div的格式包起來
<div class="check yellowtext" style="width:22.34cm;background-color:#AAAAAA;">
我的建議是版型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我就卻步了,感覺是把簡單事複雜化._.
ie9之前的版本,對於寬度(width)的定義表現並不太一樣。
簡單來講就是外距會計算跟不計算的問題。
所以你使用了float做排版,在寬度不夠的情況下就會換行。
而在ie9之前的版本,width的計算值永遠都會再多1個px的樣子。也就是這個1px讓你的寬度不足。
簡單來說,如果想要跟ie之前的版本相容的情況下。你css下的工夫還不夠。
這邊我會給你兩種建議。一種是採用寬度%來處理。
另一種就是採用 display: table-????? 這個div表格宣告處理。不要用float。
最後最簡單的就是直接用table來處理吧。
有人說
你要我寫個簡單的網頁2萬元,
寫網頁相容IE9以上5萬元,
寫網頁相容IE8以前10萬元,
(價錢是我隨便說的,
不過意思大概是這樣)
總之就是,
基本上除非客戶有需求,
不要去看IE8以前的了,
如果客戶有需求,
你就跟他抬高價錢吧...
謝謝~
其實會發生這樣的情況,
是因為微軟的老大哥心態,
因為灌Windows一定會灌IE,
微軟一直以為IE的市占率很高,
當CSS出來的時候,
微軟一直不想跟進堅持走自己的路,
但其實很多人像我一樣十年前就不用IE了,
只是擺在那邊當花瓶而已,
除了一些公家機關的網頁一定要用IE開以外。
一直到有一天微軟才突然發現自己的瀏覽器已經差人家很多了,
驚覺一定要有所改變,
所以從IE9開始才慢慢跟上CSS跟JS的步調,
到了IE11整體的支援度就比之前好很多了,
但是有些功能IE還是不支援的。
所以我痛恨死 asp web form 了,偏偏公司一堆舊網頁系統還是 asp web form 還只能相容舊ie。
這跟WebForm沒關係吧,
WebForm也可以支援CSS跟JS,
重點是IE...
看你設計的方式..
可以強制宣告IE使用的版本
參考
http://blog.darkthread.net/post-2016-05-26-x-ua-compatible-setting.aspx
<!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