<br>タグはクロムに影響を与えません

<br>タグを使用して、htmlフォームスタイルの垂直スペースを提供しています。これはFirefoxで正常に動作しますが、Google Chromeでの変更は変更されません。間違いを教えてください。<br>タグはクロムに影響を与えません

ヘッド部分

<!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; 
}

出典

2016-09-28 Ayaz

Google Chromeの次の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 />

出典

2016-09-28 07:53:58 Gowtham

これは、問題を解決しました。どうもありがとう。 – Ayaz

を設定します。それはあなたのようなラインの高さを制御しようとしているように見えます。これを行うより良い方法は、包含する要素に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="">

出典

2016-09-28 08:04:16 Quentin

あなたは、異なるブラウザで同じように様々なスタイルへの対応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 />

出典

2016-09-28 08:07:12

まだいくつかの問題に直面しています。クロムは固定されていますが、ファイアフォックスはかなり大きなサイズを示しています。私もfont-size、diditn helpを試してみました。また、CSSのプロパティをリセットしようとしました。 – Ayaz

<br>タグはクロムに影響を与えません

答えて

関連する問題