javascript - 与另一个相比，文本在一个 div 中的位置较低

Question

我现在有这个 JAVA 脚本。

 /* ******************************************************************** */
 /*                  Generated by: http://csscreator.com                 */
 /* ******************************************************************** */
 html,
 body {
   margin: 0;
   padding: 0;
   text-align: center;
   BACKGROUND: #fff;
   font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
 }
 a {
   color: #fff;
   text-decoration: none;
   white-spaces: nobreak
 }
 li {
   color: #fff;
 }
 body {
   color: #BAC6DE
 }
 #pagewidth {
   width: 1395px;
   text-align: left;
   margin: 0px auto;
 }
 #header {
   position: relative;
   height: 100px;
   width: 1395px;
   display: block;
   overflow: none;
   padding: 0px 0px 0px 0px;
 }
 #header h2 {
   color: #fff;
   padding: 0px 0px 0px 60px;
 }
 #header p {
   color: #fff;
   padding: 10px 0px 0px 60px;
 }
 #maincol {
   background-color: #BAC6DE;
   position: relative;
   width: 1395px;
   height: 800px;
   padding: 0px 0px 0px 0px;
   Margin: 0px 0px 0px 0px;
 }
 #widgetcontainer {
   background-color: #00386B;
   position: relative;
   width: 1175px;
   height: 100%;
   Margin: 0px 0px 0px 0px;
   Padding: 0px 0px 0px 10px;
   Overflow: auto;
 }
 .widget {
   background-color: #BAC6DE;
   float: left;
   width: 200px;
   height: 100%;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 10px;
 }
 #result p {
   color: #000;
 }
 #footer h2 {
   color: fff;
   padding: 0px 0px 0px 0px;
 }
 #footer p {
   color: fff;
   padding: 0px 50px 0px 60px;
   font-family: 'Monotype Corsiva', 'Apple Chancery', 'ITC Zapf Chancery', 'URW Chancery L', cursive;
   font-size: 120%;
   margin-right: 2px;
   margin-top: 8px;
 }
 /* ******************************************************************** */
 /* Clearfix: http://csscreator.com/attributes/containedfloat.php        */
 /* ******************************************************************** */
 .clearfix:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility;
   hidden;
 }
 .clearfix {
   display: inline-block;
 }
 /* Hides from IE-mac \*/
 * html .clearfix {
   height: 1%;
 }
 .clearfix {
   display: block;
 }
 /* End hide from IE-mac */
 /* ******************************************************************** */
 /* Styling for widgets hover       */
 /* ******************************************************************** */
 .current {
   color: #00386B;
   display: block;
 }
 .imgHover {
   display: inline;
   position: relative;
 }
 .imgHover .hover {
   display: none;
   position: absolute;
   z-index: 1;
 }
 .hover {
   height: 575px;
   width: 200px;
   background: #BAC6DE;
 }
 .hover a {
   display: block;
   padding: 2px;
   font-size: 80%;
   padding-left: 5px;
 }
 .hover a:link {
   /* Applies to all unvisited links */
   text-decoration: none;
   font-weight: none;
   background-color: #BAC6DE;
   color: #fff;
 }
 .hover a:hover {
   /* Applies to links under the pointer */
   text-decoration: none;
   font-weight: bold;
   background-color: #BAC6DE;
   color: #fff;
 }
 .input {
   border: 2px inset #fff;
   background: #eee;
   height: 30px;
   margin-bottom: 40px;
 }
 .input:hover {
   border: 2px solid #f00;
   background: #ff6;
 }
 .button {
   display: none;
 }
 label {
   display: block;
   width: 150px;
   float: left;
   margin: 2px 4px 6px 4px;
   text-align: right;
 }
 br {
   clear: left;
 }
 /* ******************************************************************** */
 /* Styling for console panel      */
 /* ******************************************************************** */
 a:focus {
   outline: none;
 }
 a.trigger {
   position: absolute;
   background: #9E00F8 url(../images/plus.png) 6% 55% no-repeat;
   text-decoration: none;
   font-size: 16px;
   letter-spacing: -1px;
   font-family: verdana, helvetica, arial, sans-serif;
   color: #fff;
   padding: 4px 12px 6px 30px;
   font-weight: bold;
   z-index: 2;
 }
 a.trigger.left {
   left: 0;
   border-top-right-radius: 5px;
   -moz-border-radius-topright: 5px;
   -webkit-border-top-right-radius: 5px;
   -moz-border-radius-bottomright: 5px;
   -webkit-border-bottom-right-radius: 5px;
   border-bottom-right-radius: 5px;
 }
 a.trigger.right {
   right: 0;
   border-bottom-left-radius: 5px;
   border-top-left-radius: 5px;
   -moz-border-radius-bottomleft: 5px;
   -moz-border-radius-topleft: 5px;
   -webkit-border-bottom-left-radius: 5px;
   -webkit-border-top-left-radius: 5px;
 }
 a.trigger:hover {
   background-color: #59B;
 }
 a.active.trigger {
   background: #666 url(../images/minus.png) 6% 55% no-repeat;
 }
 .panel {
   color: #CCC;
   position: absolute;
   display: none;
   background: #9E00F8;
   height: 800px;
   width: 800px;
   z-index: 1;
 }
 .panel.left {
   left: 0;
   padding: 26px 0px;
   border-top-right-radius: 15px;
   -moz-border-radius-topright: 15px;
   -webkit-border-top-right-radius: 15px;
   -moz-border-radius-bottomright: 15px;
   -webkit-border-bottom-right-radius: 15px;
   border-bottom-right-radius: 15px;
 }
 .panel p {
   font-size: 11px;
 }

<!doctype html>
<html>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
  <title>Hub Page</title>
  <meta charset="utf-8" />
  <meta generator="csscreator.com" />

  <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/+sfgRmluamFuX1R5cGU9amF2YV9zY3JpcHQmRmluamFuX0xhbmc9SmF2YVNjcmlwdA==+/html5.js"></script>
    <![endif]-->

  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.slidePanel.min.js"></script>



  <script>
    $(function() {
      $(".imgHover").hover(function() {
        $(this).children("img").fadeTo(200, 0.1).end().children(".hover").show();
      }, function() {
        $(this).children("img").fadeTo(200, 1).end().children(".hover").hide();
      });
    });
  </script>

  <script type="text/javascript">
    $(document).ready(function() {

      // default settings
      // $('.panel').slidePanel();

      // custom settings

      $('#panel2').slidePanel({
        triggerName: '#trigger1',
        triggerTopPos: '0px',
        panelTopPos: '0px'
      });

    });
  </script>

  <SCRIPT LANGUAGE="JavaScript">
    function ClipBoard() {
      holdtext.innerText = copytext.innerText;
      Copied = holdtext.createTextRange();
      Copied.execCommand("RemoveFormat");
      Copied.execCommand("Copy");
      alert("Template Copied");
    }
  </SCRIPT>

  <!-- Please link back to http://csscreator.com -->
  <link rel="stylesheet" href="style/homepage.css" type="text/css" />
</head>

<body>
  <div id="pagewidth">
    <div id="header">

      <IMG SRC="images/header.jpg" align=right>
      </a>

      <TEXTAREA ID="holdtext" STYLE="display:none;">
      </TEXTAREA>
      <SPAN ID="copytext" STYLE="height:150;width:162;display:none;">
    http://kana.ifdsgroup.co.uk/attachments/attach/uk/</SPAN>

      </P>
    </div>
    <div id="wrapper" class="clearfix">
      <div id="maincol">
        <div class="widget">
          <div class="hover">

            <!----------START NAVIGATION PANEL----------->
            <a href="TEAM HOME.htm" class="current">TEAM HOME</a>
            <a href="BASE.htm">KANA IQ</a>
            <a href="EMAIL DRAFTS.htm">EMAIL DRAFT</a>
            <a href="TEAM DOCUMENTS.htm">TEAM DOCUMENTS</a>
            <!----------END NAVIGATION PANEL----------->

          </div>
        </div>

        <div id="widgetcontainer">

          <!----------Start Team Home Links----------->
          <font size=5><strong><p>Bulletin Board. . .</p></strong></font>
          <P>Please Enter Your First Bulletin Here . . .</P>
          <!----------End Team Home Links----------->

        </div>

        <br clear=all>

      </div>
    </div>
  </div>
  </div>
</body>
</html>

谁能告诉我为什么右边 DIV(深蓝色)的文字比左边 DIV(浅蓝色)的文字低？

我已经更改了填充和边距，但我无法使其正确对齐。

Answer 1

您必须注意，浏览器有自己的元素预定义样式。

由于“Bulletin Board...”是一个 p 标签，浏览器会为该元素添加自己的边距。大多数开发人员将使用重置样式表来避免这些问题。您也可以将 margin: 0px; 添加到 p 标签中，这样就可以解决问题。