引導表在Internet Explorer上不起作用
[英]Bootstrap Table not working on Internet Explorer
問題描述
我為目標網頁開發的表在其他瀏覽器上可以正常使用，但不適用於Internet Explorer。
我正在使用Bootstrap 2.3.0作為下面圖像庫的框架和花哨框。 該表根本沒有出現在Internet Explorer中。
請記住，通常在同一頁面上有3個不同的表來處理不同的屏幕分辨率，我正在使用媒體查詢來管理哪個表應保持可見狀態。 請幫助我，找到一種使桌子正常工作的方法。
<!DOCTYPE html>
<html>
<head>
<meta charset ="UTF-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!--Custom CSS -->
<link rel="stylesheet"href="/Users/Christopher/Desktop/ClubPedia Landing page/CSS/Landingpage.css"/>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="/Users/Christopher/Desktop/ClubPedia Landing page/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css"media="screen" />
<!--fancybox javascript-->
<script type="text/javascript" src="/Users/Christopher/Desktop/ClubPedia Landing page/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12" id="Title">
<p>Title</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3" class="col-md-3"> </div>
<div id="TextBox" class="col-lg-6" class="col-md-6" >
<p> text box </p>
</div>
<div class="col-lg-3" class="col-md-3"> </div>
</div>
<div class="container-fluid">
<div class="row">
<style media="screen and (min-width:0px)">
#Large_table {display:none;}
#Medium_table {display:none;}
</style>
<style media="screen and (min-width:992px)">
#Small_table {display:none;}
#Large_table {display:none;}
#Medium_table {display:initial;}
</style>
<style media="screen and (min-width:1200px)">
#Small_table {display:none;}
#Medium_table {display:none;}
#Large_table {display:initial;}
td { width:311px;
height:228px;
}
</style>
<div class="table-responsive">
<!--Small table -->
<table class="table" id="Small_table">
<thead> </thead>
<tbody>
<tr>
<td>
<a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Babble City-Crimson.jpg" class="fancybox" rel="gallery">
<img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Babble City-Crimson.jpg" />
</a>
</tr>
<tr>
</td>
<td>
<a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Foundation-Club.jpg" class="fancybox" rel="gallery">
<img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Foundation-Club.jpg" alt="" />
</a>
</td>
</tr>
<tr>
<td>
<a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Foundation-Scribble.jpg" class="fancybox" rel="gallery">
<img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Foundation-Scribble.jpg" />
</a>
</td>
</tr>
<tr>
<td>
<a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Gem-Main Bar.jpg" class="fancybox" rel="gallery">
<img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Gem-Main Bar.jpg" />
</a>
</td>
</tr>
<tr>
<td>
<a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Grace-Milk Bar.jpg" class="fancybox" rel="gallery">
<img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Grace-Milk Bar.jpg" />
</a>
</td>
</tr>
<tr>
<td>
<a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Kanaloa-Club.jpg" class="fancybox" rel="gallery">
<img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Kanaloa-Club.jpg"/>
</a>
</td>
</tr>
<tr>
<td>
<a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Piccadilly Institute-Clinic.jpg" class="fancybox" rel="gallery">
<img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Piccadilly Institute-Clinic.jpg" />
</a>
</td>
</tr>
<tr>
<td>
<a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Piccadilly Institute-Fruitbox Bar.jpg" class="fancybox" rel="gallery">
<img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Piccadilly Institute-Fruitbox Bar.jpg" />
</a>
</td>
</tr>
</tbody>
</table>
<!-- Medium table --->
<table class="table" id="Medium_table">
<thead> </thead>
<tbody>
<tr>
<td>
<a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Babble City-Crimson.jpg" class="fancybox" rel="gallery">
<img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Babble City-Crimson.jpg" />
</a>
</td>
<td>
<a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Foundation-Club.jpg" class="fancybox" rel="gallery">
<img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Foundation-Club.jpg" alt="" />
</a>
</td>
</tr>
<tr>
<td>
<a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Foundation-Scribble.jpg" class="fancybox" rel="gallery">
<img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Foundation-Scribble.jpg" />
</a>
</td>
<td>
<a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Gem-Main Bar.jpg" class="fancybox" rel="gallery">
<img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Gem-Main Bar.jpg" />
</a>
</td>
</tr>
<tr>
<td>
<a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Grace-Milk Bar.jpg" class="fancybox" rel="gallery">
<img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Grace-Milk Bar.jpg" />
</a>
</td>
<td>
<a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Kanaloa-Club.jpg" class="fancybox" rel="gallery">
<img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Kanaloa-Club.jpg"/>
</a>
</td>
</tr>
<tr>
<td>
<a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Piccadilly Institute-Clinic.jpg" class="fancybox" rel="gallery">
<img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Piccadilly Institute-Clinic.jpg" />
</a>
</td>
<td>
<a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Piccadilly Institute-Fruitbox Bar.jpg" class="fancybox" rel="gallery">
<img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Piccadilly Institute-Fruitbox Bar.jpg" />
</a>
</td>
</tr>
</tbody>
</table>
<!--Large table-->
<table class="table" id="Large_table" >
<thead> </thead>
<tbody>
<tr>
<td>
<a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Babble City-Crimson.jpg" class="fancybox" rel="gallery">
<img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Babble City-Crimson.jpg" />
</a>
</td>
<td>
<a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Foundation-Club.jpg" class="fancybox" rel="gallery">
<img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Foundation-Club.jpg" alt="" />
</a>
</td>
<td>
<a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Foundation-Scribble.jpg" class="fancybox" rel="gallery">
<img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Foundation-Scribble.jpg" />
</a>
</td>
<td>
<a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Gem-Main Bar.jpg" class="fancybox" rel="gallery">
<img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Gem-Main Bar.jpg" />
</a>
</td>
</tr>
<tr>
<td>
<a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Grace-Milk Bar.jpg" class="fancybox" rel="gallery">
<img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Grace-Milk Bar.jpg" />
</a>
</td>
<td>
<a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Kanaloa-Club.jpg" class="fancybox" rel="gallery">
<img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Kanaloa-Club.jpg"/>
</a>
</td>
<td>
<a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Piccadilly Institute-Clinic.jpg" class="fancybox" rel="gallery">
<img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Piccadilly Institute-Clinic.jpg" />
</a>
</td>
<td>
<a href="/Users/Christopher/Desktop/ClubPedia Landing page/img/Piccadilly Institute-Fruitbox Bar.jpg" class="fancybox" rel="gallery">
<img src="/Users/Christopher/Desktop/ClubPedia Landing page/img/Piccadilly Institute-Fruitbox Bar.jpg" />
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</body>
</html>
這是自定義CSS：
#TextBox {
margin-left:auto;
margin-right:auto;
border-radius: 5px;
background-color:grey;
height:500px;
width:50%;
}
#Title {
height:300px;
background-color:white;
opacity:0.9;
}
body {
background-color:black;
}
img {
width:100%;
height:auto;
}
table {
margin-left:auto;
margin-right:auto;
}
1 個解決方案
解決方案1
1 2014-09-04 22:20:24
只是檢查了示例中提供的HTML，並認為存在問題-這是無效的。 有一些像
<div class="col-lg-3" class="col-md-3">
如果您不知道-您只有一個元素的類屬性，並且可以將類添加在一起，例如
<div class="col-lg-3 col-md-3">
猜猜您應該修復您的HTML，也許已經解決了問題。
許多CSS規則僅適用於同時具有不同類的元素（對於<div class="classone classtwo"/>在CSS中寫為.classone.classtwo ）。 當每個類作為單獨的類屬性值添加時，它們將不會相加。 盡管無效，但是不同的瀏覽器傾向於以不同的方式處理無效的標記，例如，嘗試將其糾正為可能顯示的標記。 因此，看起來Firefox可以在IE正常運行時對其進行修復。
用於引導程序的Lightbox2在Firefox和Internet Explorer上不起作用
[英]Lightbox2 for bootstrap not working on Firefox and Internet Explorer
Firefox上的Z-index-Internet Explorer無法正常工作。 引導模態
[英]z-index on firefox - internet explorer is not working. Bootstrap modal
Bootstrap 4 .form-inline 在 Internet Explorer 11 中不起作用
[英]Bootstrap 4 .form-inline not working in Internet Explorer 11
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
動態表在 Internet Explorer 中不起作用
用於引導程序的Lightbox2在Firefox和Internet Explorer上不起作用
在Internet Explorer中，圍繞表格的href無效
Internet Explorer 11 中的粘性表頭不起作用
Internet Explorer中的Bootstrap 3問題
Firefox上的Z-index-Internet Explorer無法正常工作。 引導模態
Bootstrap 4 .form-inline 在 Internet Explorer 11 中不起作用
Internet Explorer中的表格填充
Internet Explorer 8表格填充
onclick在Internet Explorer 7中不起作用
相關標簽