Question

代码段输出是我现在在Chrome / FF中看到的方式

我有一个在IE9上呈现这样的HTML代码：

但它在Firefox / Chrome上很好用： http://snag.gy/ABaPK.jpg

我列表中的第一个元素是仅在IE中使用CSS进行渲染。

我一直在尝试调试并找出运气不好的情况。我附上了我正在使用的HTML示例。有人可以帮忙吗？

＆＃13;

.custlabel{display:inline-block !important;margin-top:0px !important;margin-bottom:5px !important;font-weight:bold !important;color:black !important;margin-left:0px !important}

.customalert{background-color: #fff;border-color: #ccc;color: #333;}

.customcolor1{background-color: #fff !important;border-color: #ccc !important;color: #333 !important;}

.customcolor2{background-color: #fff !important;border-color: #ccc !important;color: #333 !important;}

.applypointer{cursor: pointer;}

.tablewithoutmarginbottom{margin-bottom: 0px;}

.borderless tbody tr td, .borderless tbody tr th, .borderless thead tr th {
    border: none;
}

.form-group.required .control-label:after { 
   content:"  *";
   color:red;
}

.selectedmainbutton .selectedmainbutton:hover, .selectedmainbutton:focus, .selectedmainbutton:active, .selectedmainbutton {
	background-color: #39b3d7 !important;
}

.unselectedmainbutton:hover, .unselectedmainbutton:hover, .unselectedmainbutton:active, .unselectedmainbutton  {
	background-color: #6E6E6E !important;
}

.highlight {
	background: lightblue !important;
}

/* .panel-body { padding:0px; } */
.panel-body table tr td { padding-left: 10px }
/* .panel-body .table {margin-bottom: 0px; } */

.accordion h4 i {
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.accordion h4 i.fa-chevron-down {
    font-size: 16px;
    float: right;
    /* padding-left: 37px; */
}

.accordion h4.open i.fa-chevron-down  {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet"/>
<link href="https://code.jquery.com/ui/1.9.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<table id="eventTypesTable" class="col-md-4 table borderless">
	<tbody id="eventTypesTableBody">
		<div id="EventTypeAccordionDiv" class="ui-accordion ui-widget ui-helper-reset" role="tablist">
			<div id="accordion" class="Top Things to Do &amp; SeeEventType ui-accordion-header ui-state-default ui-corner-all ui-accordion-icons" style="table-layout: fixed; width: 100%;" role="tab" aria-controls="EventTypeAccordionEventName0" aria-selected="false" aria-expanded="false" tabindex="0">
				<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
				<h3 id="EventTypeAccordionEventTypeName0" class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-header-active ui-state-active ui-corner-top ui-accordion-icons" role="tab" aria-controls="EventTypeAccordionEventName0" aria-selected="true" tabindex="0" style="border: medium none;">
					<div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 90%;"><a> Top Things to Do &amp; See</a></div>
				</h3>
			</div>
			<div id="EventTypeAccordionEventName0" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" aria-labelledby="accordion" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none;">
				<div style="display: table; table-layout: fixed; width: 100%;">
					<div id="" style="width: 100%; padding-bottom: 10px;">
						<div id="" class="input-group" style="display: table; table-layout: fixed; width: 95%;" title="San Diego Zoo General Admission">
							<button id="5748" name="" value="5748" class="btn-block btn eventbutton customcolor1" onclick="getEventDetails(this)" style="border-radius: 0px;">
								<div id="" style="text-align: left; padding-left: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 95%;">San Diego Zoo General Admission</div>
							</button>
							<span id="" class="input-group-btn" title="Add Me to Cart!"><button id="spancart5748" name="" value="5748" class="btn btn-default" onclick="callEventModalFromCart(this)" data-target="#bookEventModal" data-toggle="modal" style="border-radius: 0px;"><span id="spancart5748" class="glyphicon glyphicon-shopping-cart"></span></button></span>
						</div>
					</div>
				</div>
			</div>
			<div id="accordion" class="AttractionsEventType ui-accordion-header ui-state-default ui-corner-all ui-accordion-icons" style="table-layout: fixed; width: 100%;" role="tab" aria-controls="EventTypeAccordionEventName1" aria-selected="false" aria-expanded="false" tabindex="-1">
				<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
				<h3 id="EventTypeAccordionEventTypeName1" class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-header-active ui-state-active ui-corner-top ui-accordion-icons" role="tab" aria-controls="EventTypeAccordionEventName1" aria-selected="true" tabindex="0" style="border: medium none;">
					<div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 90%;"><a>Attractions</a></div>
				</h3>
			</div>
			<div id="EventTypeAccordionEventName1" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" aria-labelledby="accordion" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none;">
				<div style="display: table; table-layout: fixed; width: 100%;">
					<div id="" style="width: 100%; padding-bottom: 10px;">
						<div id="" class="input-group" style="display: table; table-layout: fixed; width: 95%;" title="San Diego Wild Animal Park - Photo Caravan">
							<button id="5747" name="" value="5747" class="btn-block btn eventbutton customcolor1" onclick="getEventDetails(this)" style="border-radius: 0px;">
								<div id="" style="text-align: left; padding-left: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 95%;">San Diego Wild Animal Park - Photo Caravan</div>
							</button>
							<span id="" class="input-group-btn" title="Add Me to Cart!"><button id="spancart5747" name="" value="5747" class="btn btn-default" onclick="callEventModalFromCart(this)" data-target="#bookEventModal" data-toggle="modal" style="border-radius: 0px;"><span id="spancart5747" class="glyphicon glyphicon-shopping-cart"></span></button></span>
						</div>
					</div>
				</div>
				<div style="display: table; table-layout: fixed; width: 100%;">
					<div id="" style="width: 100%; padding-bottom: 0px;">
						<div id="" class="input-group" style="display: table; table-layout: fixed; width: 95%;" title="San Diego Zoo Safari Park General Admission">
							<button id="10791" name="" value="10791" class="btn-block btn eventbutton customcolor1" onclick="getEventDetails(this)" style="border-radius: 0px;">
								<div id="" style="text-align: left; padding-left: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 95%;">San Diego Zoo Safari Park General Admission</div>
							</button>
							<span id="" class="input-group-btn" title="Add Me to Cart!"><button id="spancart10791" name="" value="10791" class="btn btn-default" onclick="callEventModalFromCart(this)" data-target="#bookEventModal" data-toggle="modal" style="border-radius: 0px;"><span id="spancart10791" class="glyphicon glyphicon-shopping-cart"></span></button></span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</tbody>
</table>

＆＃13;

Internet Explorer 9 HTML问题 - 第一个元素的样式不呈现

0 个答案: