【问题标题】:<br> tag having no effect on chrome<br> 标签对 chrome 没有影响
【发布时间】:2025-12-21 06:45:07
【问题描述】:

我使用&lt;br&gt; 标签来提供 html 表单样式的垂直空间。这在 Firefox 中运行良好,但不会更改 google chrome 中的 spcaing。请让我知道错误。

头部部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

我的表单的一部分是:

<div id="filter-details"> 
 <form action="" method="post">
 From Date-Time:<br />
 <input type="text" id="startdate" name="startdate" value="">
 <br />
 To Date-Time:<br />
 <input type="text" id="enddate" name="enddate" value="">
 <br />

CSS 样式表:

br {
    margin-bottom: 5.7px;
}

【问题讨论】:

    标签: html css xhtml


    【解决方案1】:

    为谷歌浏览器添加以下css代码,设置content:" ";

    br{
      display: block;
       margin: 5.7px 0;
      content: " ";
    }
    

    br{
      display: block;
       margin: 5.7px 0;
      content: " ";
    }
    <div id="filter-details"> 
     <form action="" method="post">
     From Date-Time:<br />
     <input type="text" id="startdate" name="startdate" value="">
     <br />
     To Date-Time:<br />
     <input type="text" id="enddate" name="enddate" value="">
     <br />

    【讨论】:

      【解决方案2】:

      换行符应该只是换行符。看起来您正在尝试控制行高。更好的方法是将line-height 属性应用于包含元素。

      #filter-details form {
        line-height: 1.8;
      }
      <div id="filter-details">
        <form action="" method="post">
          From Date-Time:
          <br />
          <input type="text" id="startdate" name="startdate" value="">
          <br />To Date-Time:
          <br />
          <input type="text" id="enddate" name="enddate" value="">

      【讨论】:

        【解决方案3】:

        您不应该指望br 在不同的浏览器中以相同的方式响应各种样式。您可以更改的唯一属性是font-size

        所以这是给br 额外高度的方法。

        br {
          font-size:1.4em;
        }
        <div id="filter-details"> 
         <form action="" method="post">
         From Date-Time:<br />
         <input type="text" id="startdate" name="startdate" value="">
         <br />
         To Date-Time:<br />
         <input type="text" id="enddate" name="enddate" value="">
         <br />

        【讨论】:

        • 仍然面临一些问题。虽然 chrome 是固定的,但 Firefox 显示的尺寸相当大。我也尝试过使用字体大小,diditn 帮助。还尝试重置 css 属性。