使用 <!DOCTYPE html> 时不需要的边框

Question

如果我使用 !DOCTYPE html ，不需要的边框会出现在页眉的下角。我使用图像来获得这些角。 Internet Explorer 和 Chrome 也有同样的问题。我怎样才能删除这些边框？如果我使用 !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN 则没有任何问题。

代码是：

  body {
             font-family : arial, sans-serif;
             background-color: #FFFFF0;
              margin:0;
             }

             div.header {
              width: 100%;
              text-align: center;
              background-color: #0000CC;
              float: left;    
              padding:0.001em;
                }

<!DOCTYPE html>
            <HTML>
             <HEAD>
              <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
                   </HEAD>
                  <BODY>
                <DIV class="header">

                  <IMG SRC="http://www.usefulchess.com/kq.gif" BORDER="0" WIDTH="80" HEIGHT="63" 
                   ALT="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<IMG SRC="http://www.usefulchess.com/useful.gif" 
                   BORDER="0" WIDTH="150" HEIGHT="49" ALT="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<IMG 
                    SRC="http://www.usefulchess.com/chess.gif" BORDER="0" WIDTH="200" HEIGHT="60" ALT="">
                   <IMG SRC="http://www.usefulchess.com/sembol.gif" BORDER="0" WIDTH="255" HEIGHT="84" 
                    ALT="" class="sembol">
    
                          </DIV>
    


                       <DIV class="menudesktop"><!-- menu desktop -->
                        <!-- BUTTON-->

                     <TABLE bgcolor="#0000CC" WIDTH="100%" BORDER="0">
                      <TR><TD>&nbsp;&nbsp;</TD></TR>
                        </TABLE>
                      <TABLE bgcolor="#0000CC" WIDTH="100%" BORDER="0" cellpadding="0" cellspacing="0">



                        <TR>
                       <TD  WIDTH="3%" HEIGHT="25"><IMG SRC="http://www.usefulchess.com/left2.gif" 
                        BORDER="0" WIDTH="60" HEIGHT="25" ALT="">
                        </TD>

                        <TD align="center" WIDTH="95%" HEIGHT="25">
                   <A HREF="../index.html" class=button>Home</A>&nbsp;&nbsp;
                   <a href="../play/playchess.html" class="button">Play Chess</a>&nbsp;&nbsp;
                   <a href="../rules/chess-rules.html" class="button">Chess Rules</a>&nbsp;&nbsp;
                  <a href="../tactics/chess-tactics.html" class="button">Chess Tactics</a>&nbsp;&nbsp;
                  <a href="../problems/chessproblem2_1.html" class="button">Problems </a>&nbsp;&nbsp;
                   <a href="../studies/chess_study1.html" class="button">Studies </a>

                    &nbsp;&nbsp;
                    <A HREF="../store/chess_books.html" class="button">Books</A>

                          </TD>

                    <TD WIDTH="2%" HEIGHT="25"><IMG SRC="http://www.usefulchess.com/right2.gif" 
                     BORDER="0" WIDTH="60" HEIGHT="25" ALT="">
                        </TD>

                         
                         </TR>
                           </TABLE>

                             </DIV><!-- menu desktop end-->

</BODY>
</HTML>

Answer 1

我使用以下方式修复它：display:block；例子： Details on whosebug.com : Fit image to table cell [Pure HTML]
将 bgcolor 与 !DOCTYPE html 一起使用也会创建不需要的边框。

使用 <!DOCTYPE html> 时不需要的边框

unwanted borders when I use <!DOCTYPE html>

html

css

doctype