css - 为什么这在 Firefox、Chrome 和 IE 中的工作方式不同？

标签 css html-table centering onmouseover

我只想问以下问题:

  1. 为什么表格在不同的浏览器中表现异常？这种行为与其他标签相同吗？即使是我的数据，虽然反复居中也没有显示它应该的方式。我使用“test-align”的方式有问题吗？ (我还没有发现和其他标签有什么区别)

  2. 当我尝试将“id”属性放入 <td element> 时为什么它看起来像 block 元素？

  3. 如何更改 onMOuseOut，使其在我的鼠标离开显示的选项之前不会关闭？

body {
margin:0px;
padding:0px
}

#header {
height:150px;
background-color:green;
margin:10px;
}

#navbar {
height:60px;
background-color:teal;
text-align:center;
margin:10px;
padding:0px;
}


#hlink1{
background-color:lime;
text-align:center;
height:40px;
padding:3px;
margin-left:0px;
margin-right:0px;
margin-top:5px;
margin-bottom:5px;
}

#hlink2{
background-color:lime;
text-align:center;
height:40px;
padding:3px;
margin-left:0px;
margin-right:0px;
margin-top:5px;
margin-bottom:5px;
}

#hlink3{
background-color:lime;
text-align:center;
height:40px;
padding:3px;
margin-left:0px;
margin-right:0px;
margin-top:5px;
margin-bottom:5px;
}

#hlink1:hover{
background-color:aqua;
text-align:center;
}

#hlink2:hover{
background-color:aqua;
text-align:center;
}

#hlink3:hover{
background-color:aqua;
text-align:center;
}


table {
width:100%;
border-collapse: collapse;
text-align:center;
}

#data3 {
background-color:lime;
padding:5px;
height:0px;
display:none;
}

#data2 {
background-color:lime;
padding:5px;
text-align:center;
height:0px;
display:none;
}

#data1 {
background-color:lime;
padding:5px;
text-align:center;
height:0px;
display:none;
}

.inn:hover{
background-color:aqua;
}
<html>
<head>
<title>Experiment</title>
<link rel="stylesheet" type="text/css" href="nav.css" />
</head>
<body>

<div id="header">
</div>

<div id="navbar">
<table>
	<th onMouseOver="document.getElementById('data1').style.display='inline';" onMouseOut="document.getElementById('data1').style.display='none';">
	<div id="hlink1">Heading_Link1</div>
	</th>
	<th onMouseOver="document.getElementById('data2').style.display='inline';" onMouseOut="document.getElementById('data2').style.display='none';">
	<div id="hlink2">Heading_Link2</div>
	</th>
	<th onMouseOver="document.getElementById('data3').style.display='inline';" onMouseOut="document.getElementById('data3').style.display='none';">
	<div id="hlink3">Heading_link3</div>
	</th>
	<tr>
		<td colspan="1">
		<table  id="data1">
			<tr><td class="inn">data</td></tr>
			<tr><td class="inn">data</td></tr>
			<tr><td class="inn">data</td></tr>
			<tr><td class="inn">data</td></tr>
		</table>
		</td>
	
		<td>
		<table  id="data2">
			<tr><td class="inn">data</td></tr>
			<tr><td class="inn">data</td></tr>
			<tr><td class="inn">data</td></tr>
			<tr><td class="inn">data</td></tr>
		</table>
		</td>

	
		<td>
		<table  id="data3">
			<tr><td class="inn">data</td></tr>
			<tr><td class="inn">data</td></tr>
			<tr><td class="inn">data</td></tr>
			<tr><td class="inn">data</td></tr>
		</table>
		</td>
	</tr>
	</table>
</div>
</body>
</html>

最佳答案

您不应该在不更改其中结构的显示值的情况下尝试更改表的 display 值。虽然从技术上讲不是错误，但这相当于将 tr 放在 span 中；浏览器显然处理不同。
现在，如果您将鼠标悬停事件更改为阅读

document.getElementById('data1').style.display='table';

它们在所有浏览器中的行为相同。

至于第 3 点，可能需要在结构上稍作改动。目前，数据表与悬停行位于不同的行中，因此它们不会相互影响。如果将这些数据表直接放在标题单元格中，则悬停会容易得多；您甚至不需要 JavaScript 事件。

<th>
  <div id="hlink1">Heading_Link1</div>
  <table  id="data1">
    <tr><td class="inn">data</td></tr>
    <tr><td class="inn">data</td></tr>
    <tr><td class="inn">data</td></tr>
    <tr><td class="inn">data</td></tr>
  </table>
</th>

还有 CSS:

#navbar th:hover table {
  display:table
}

无需在每个标题单元格中拼出所有 onmouseover 操作!

body {
  margin:0px;
  padding:0px
}

#header {
  height:150px;
  background-color:green;
  margin:10px;
}

#navbar {
  height:60px;
  background-color:teal;
  text-align:center;
  margin:10px;
  padding:0px;
}


#hlink1, #hlink2, #hlink3 {
  background-color:lime;
  text-align:center;
  height:40px;
  padding:3px;
  margin-left:0px;
  margin-right:0px;
  margin-top:5px;
  margin-bottom:5px;
}

#hlink1:hover, #hlink2:hover, #hlink3:hover{
  background-color:aqua;
}

table {
  width:100%;
  border-collapse: collapse;
  text-align:center;
}

#data1, #data2, #data3 {
  background-color:lime;
  padding:5px;
  display:none;
}

.inn:hover{
  background-color:aqua;
}

#navbar th {
  vertical-align:top;
}

#navbar th:hover table {
  display:table
}
<html>
  <head>
    <title>Experiment</title>
    <link rel="stylesheet" type="text/css" href="nav.css" />
  </head>
  <body>

    <div id="header">
    </div>

    <div id="navbar">
      <table>
        <th>
          <div id="hlink1">Heading_Link1</div>
          <table  id="data1">
            <tr><td class="inn">data</td></tr>
            <tr><td class="inn">data</td></tr>
            <tr><td class="inn">data</td></tr>
            <tr><td class="inn">data</td></tr>
          </table>
        </th>
        <th>
          <div id="hlink2">Heading_Link2</div>
          <table  id="data2">
            <tr><td class="inn">data</td></tr>
            <tr><td class="inn">data</td></tr>
            <tr><td class="inn">data</td></tr>
            <tr><td class="inn">data</td></tr>
          </table>
        </th>
        <th>
          <div id="hlink3">Heading_link3</div>
          <table  id="data3">
            <tr><td class="inn">data</td></tr>
            <tr><td class="inn">data</td></tr>
            <tr><td class="inn">data</td></tr>
            <tr><td class="inn">data</td></tr>
          </table>
        </th>
      </table>
    </div>
  </body>
</html>

关于css - 为什么这在 Firefox、Chrome 和 IE 中的工作方式不同？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30232504/

上一篇：html - 带有居中文本(垂直和水平)的圆形链接和事件区域只有圆形，而不是方形

下一篇：html - 如何制作水平滚动面板或轮播？

相关文章：

css - 响应式图片库

html - 对齐模态框中所有卡片的内容

css - 如何让页面的每一行文本/元素水平居中？

python - 更改部分字符串方法并将其附加到打印函数

jquery - 按钮将文本放在类的右上角

css - 如何弹出两种不同的颜色？

javascript - 在 html 表中的两个字段之间画线？

html - 我可以通过 CSS 设置表格单元格元素的宽度吗？

javascript - 为什么附加 HTML 后 Bootstrap 按钮不可点击？

html - Fonts.com 字体不会居中

©2024 IT工具网  联系我们