HTML 在 firefox 和 IE 中工作，但在 chrome 中不工作

Question

嗨，我设计了一个网站，但不幸的是它不能在 chrome 中运行，在 Firefox 和 IE 中完全正常。 我是 HTML 编程的初学者。 下面是代码。 如果可能，请提供帮助。

问题是我放置在代码中的按钮未显示在 chrome 中的所需位置。

 $j(document).ready(function() { if (_jive_effective_user_id == -1) { // anonymous or not logged in user $j("#getStartedLink").attr("href", "link1"); $j("#getStartedLink1").attr("href", "link2"); $j("#getStartedLink2").attr("href", "/login.jspa?fromMP=3193&clickedOnDownload=sd"); $j("#getStartedLink3").attr("href", "/login.jspa?fromMP=3193&clickedOnDownload=sd"); } else { // logged in user $j("#getStartedLink").attr("href", "link3"); $j("#getStartedLink1").attr("href", "link4"); $j("#getStartedLink2").attr("href", "link5"); $j("#getStartedLink3").attr("href", "link6"); } });

 .contents { <!--margin: auto auto auto -22px; --> width: 103.6%; background: none repeat scroll 0 0 #000; } .shadow { padding-top: 0; background: none repeat scroll 0 0 #000; min-height: 340px; } body { font-size: 20px; font-family: 'FuturaStd-Light'; line-height: 1.231; } #jive-body-main { width: 100%; } #jive-widget-content { padding: 0 0px; } #footer .footer-tab-contents .contents { background: transparent; } .gradient2 { display: none; } .gradient { display: block; } .webcast_list li { list-style-image: none; } .container_12 .grid_7 { width: 90%; } .tab-inner-devPortal p { font-family: 'FuturaStd-Light'; } .jive-widget-body .jive-html-text-widget ul li { list-style-type: disc; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content-inner" style="background-color: white; margin-bottom: 1px; border-bottom:1px solid rgb(210,210,210);"> <div class="wrap"> <div class="container_12"> <div class="grid_6 text-center" style="margin-top:103px;"> <img src="IMAGE" alt="" style="width:450px; margin-top: -78px;"> </div> <div class="grid_6 box suffix_05" style="padding-right:0px;"> <p class="" style="font-size:150%; margin-top:-50px;"><strong style="margin-left: -350px;">TEXT</strong> </p> <p class="lh190" style="font-size:15px;">The <a href="link" target="_new">Text:</a> </div> <div style="float: left"> <ul class="webcast_list" style="margin-top: -135px; font-size:15px; margin-left: 510px; list-style-image: none;"> <li style="margin-bottom: 8px;">Text</li> <li style="margin-bottom: 8px;">Text</li> <li style="margin-bottom: 8px;">Text</li> <li style="margin-bottom: 8px;">Text</li> <li style="margin-bottom: 8px;">Text</li> </ul> </div> </div> <div class="text-center"> <a href="HTML form" class="btn-more" style="margin-bottom: -3px; margin-left: -35px; margin-top: 85px; text-transform:none;">Button</a> </div> <div class="clearfix"></div> </div> </div>

Answer 1

请写干净的代码。 我不明白你想做什么！ 你有4个解决方案：

1. 内联级别元素上的边距无法正常工作。 <a>元素是内联元素。 您应该将<a>的显示属性更改为阻止。

   <a href="HTML form" style="display: block; margin-bottom: -3px; margin-left: -35px; margin-top: 85px; text-transform:none;">Button</a>

2. 相对定位

3. 绝对定位

4. 您可以设置 a 的第一个父 div 元素的样式。