时间戳

首页 > 解决方案 > 表单布局在 Firefox 上表现异常

css - 表单布局在 Firefox 上表现异常

问题描述

我设计了一个使用弹性框的表单。表单在 chrome 和 Internet Explorer 上运行良好，但 3 个字段并排放置的部分溢出了 Firefox 中的表单，但在 chrome 上看起来不错。任何可能的解决方案。我尝试为每个字段定义宽度，但还没有找到任何可能的解决方案。任何可能的解决方案

.Row1{
    margin-top:-3px;
    display:flex;
    flex-direction: row;
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-start;
    background-image:url(Media/Mask\ Group\ 14.jpg);
    background-position:center bottom;
    background-size:cover;
    padding:6% 15%;
}
.content{
    display:flex;
    flex-direction:column;
    margin:5% 5% 0 5%;
    flex-basis:40%;
}
.content h1{
    font-family:Roboto , Arial , sans-serif;
    font-weight:600;
    font-size:2.0625rem;
    text-align:left;
    color:#ffffff;
    letter-spacing:0.015em;
}
.content p,.content2 p{
    font-family:roboto,arial,sans-serif;
    font-weight:400;
    color:#b4b4b4;
}
.content h2,.content2 h1{
    font-family:Roboto , Arial , sans-serif;
    font-weight:300;
    color:#ffffff;
}
.contactDetails{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:flex-start;
    margin:0;
}
.cell, .UAN{
    justify-content:center;
    align-items:center;
    padding:5px;
    display:flex;
    margin-top:-30px;
}
.fa-globe , .fa-phone-alt{
    color:#ffffff;
    font-size:25px;
    text-align:left;
}
.cell p, .UAN p{
    padding:10px;
    color:#ffffff;
    font-size:20px;
    font-family: Roboto, Arial , sans-serif;
    text-align:left;
}
/*Styling of Booking Form */
form{
    width:100%;
}
.bookingForm{
    padding:2%;
    background:#303030;
    flex-basis:45%;
    margin:3% 0 7% 0;
    position:relative;
    max-width:100%;
}

.bookingForm h2{
 color:#000733;
 font-family:Sen, arial, sans-serif;
 font-size:35px;
 font-weight:700;
 line-height:40px;
}
.inputBox{
    display:flex;
    width:calc(100%-10px);
    margin:15px 5px;
    position:relative;
}
label{
    position:absolute;
    top:-15px;
    left:0px;
    font-family: Roboto,Arial,sans-serif;
    font-size:12px;
    color:#b4b4b4;

}
.icon{
    padding:10px;
    color:#b4b4b4;
    border-bottom:1px solid #b4b4b4;
    font-size:16px;
}
.Xchangeholder{
    padding:12px;
    position:relative;
}
.iconXchange{
    border:none;
    transform:rotate(90deg);
    position:absolute;
    right:0px;
  
}
.inputField{
   /* padding:10px;*/
    border:none;
    background:#303030;
    border-bottom:1px solid #b4b4b4;
    outline:none;
    width:100%;
}
input:focus::placeholder{
    color:transparent;
}
.FPL{
 display:flex;   
}
.Fleet{
    /*flex-basis:55%;*/
    /*width:calc(60%-10px);*/
    /*margin:10px 3px 10px 10px;*/
    width:50%;
}
.passngr{/*flex-basis:22%;*/   /*width:calc(20%-10px);*/
    /*margin:10px 3px 10px 0px;*/
    width:25%;

}
.lugg{
    /*flex-basis:22%;*/
   /* width:calc(20%-10px);*/
  /* margin:10px 0px;*/
  width:25%;
}
.dateNtime{
    display:flex;
    margin-bottom:20px;
}
.date , .time{
    width:50%;
}
input[type="time"],input[type="date"]{
    position:relative;
}
input[type="time"]::-webkit-calendar-picker-indicator, input[type="date"]::-webkit-calendar-picker-indicator {
    color:rgba(0,0,0,0);
    background:none;
    z-index:1;
}
input[type="time"]:before , input[type="date"]:after{
    color: transparent;
    background: none;
    display: block;
    font-family: 'FontAwesome';
    content: '\f107';
    cursor:pointer;
    /* This is the calendar icon in FontAwesome */
    width: 15px;
    height: 20px;
    position: absolute;
    top: 12px;
    right: 6px;
    color: #000;
}

/*Styling of toggle button in Forms */
.switchButton{
    position:relative;
}
.switchButton h5{
    position:absolute;
    color:#606060;
    font-family:Roboto,Arial,sans-serif;
    font-size:16px;
    left:0px;
    bottom:-7px;
}
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
    margin-left: 60px;
  }
  
/*.switch input { 
    opacity: 1;
    width: 0;
    height: 0;
  }*/

  .slider {
    border-radius:34px;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
     background-color:#ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius:50%;
  }
  
  input:checked + .slider {
    background-image: linear-gradient(to right, #f8c212 , #f8c212, #f8be13, #f8b216, #f89f1b, #f89c1c, #f89c1c);
  }
 /* 
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  */
  
  input:checked + .slider:before {
    -webkit-transform: translateX(16px);
    -ms-transform: translateX(16px);
    transform: translateX(16px);
  }
/* End of toggle button styling*/

/*Forms buttons styling*/
.buttons{
    display:flex;
    justify-content: space-evenly;
    margin-bottom:40px;
    
}
.loginButton , .qouteButton{
    padding:15px 45px;
    border:none;
    width:50%;
    color:white;
    font-family:Roboto,Arial,sans-serif;
    font-size:16px;
    font-weight:700;
    outline:none;
}
.loginButton{
    background:#000733;
    margin-right:20px;
}
.qouteButton{
    background-image: linear-gradient(to left, #f8c212 , #f8c212, #f8be13, #f8b216, #f89f1b, #f89c1c, #f89c1c);
}
<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>Airport Taxi Service</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width , initial-scale=1.0">
        <link rel="stylesheet" href="ATS.css">
        <script src="https://kit.fontawesome.com/5631a5be5b.js" crossorigin="anonymous"></script>
        <link href="https://fonts.googleapis.com/css2?family=Sen:wght@400;700;800&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&family=Sen:wght@400;700;800&display=swap" rel="stylesheet">
    </head>
    <body>       
        <div class=" Row Row1">
            <div class="content">
                <h1>AirportTaxi Service</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque viverra maximus auctor. Nullam dignissim pretium leo quis vulputate. Ut non gravida ligula. Duis quis condimentum eros. Aenean enim urna, ultricies in lacus in, bibendum gravida elit. Nam tempor, neque a vulputate consectetur, est sem tempor diam, eget rhoncus elit nulla.</p>
                <h2>ONWARD TRAVEL SOLUTIONS</h2>
                <div class="contactDetails">
                    <div class="cell"><i class="fas fa-phone-alt"></i> <p>0300 *******</p></div>
                    <div class="UAN"><i class="fas fa-globe"></i><p>+1 2026 334</p></div>
                </div>
            </div>
            <div class="bookingForm">

                <form>
                    <h2>Book Now</h2>
                    <div class="inputBox pickup">
                        <i class="icon fa fa-map-marker" aria-hidden="true"></i>
                        <label for="fromLoc">PickUp:</label>
                        <input type="text" class="inputField" id="fromLoc" name="fromLoc" placeholder="PickUp point">
                    </div>
                    <div class="inputBox Xchangeholder">
                        <i class="fa fa-exchange icon iconXchange" aria-hidden="true"></i>
                    </div>
                  
                    <div class="inputBox dropOff">
                        <i class="icon fa fa-map-marker" aria-hidden="true"></i>
                        <label for="toLoc">Destination:</label>
                        <input type="text" class="inputField" id="toLoc" name="toLoc" placeholder="Destination point">
                    </div>
                    <div class="FPL">
                        <div class="inputBox Fleet">
                            <i class="fa fa-car icon" aria-hidden="true"></i>
                            <label for="fleet">Fleet:</label>
                            <select class="inputField" name="fleet" id="carFleet">
                            <option value="Economy">Economy</option>
                            <option value="Average">Average</option>
                            <option value="Luxury">Luxury</option>
                            </select>
                        </div>
                        <div class="inputBox passngr">
                            <i class="fa fa-user icon" aria-hidden="true"></i>
                            <label for="passenger">Passengers:</label>
                            <input class="inputField" type="number"placeholder="0" id="Passngr"name="passenger" min="1" max="5">
                        </div>
                        <div class="inputBox lugg">
                            <i class="fa fa-suitcase icon" aria-hidden="true"></i>
                            <label for="luggage">Luggage:</label>
                            <input class="inputField" placeholder="0" type="number" id="Luggage" name="luggage" min="1" max="30">
                        </div>
                    </div>
                    <div class="dateNtime">
                        <div class="inputBox date">
                            <i class="fa fa-calendar icon" aria-hidden="true"></i>
                            <label for="date">Date:</label>
                            <input class="inputField" type="date" name="date" value="2020-10-31" min="2020-10-31" max="2090-12-31">
                        </div>
                        <div class="inputBox time">
                            <i class="fa fa-clock-o icon" aria-hidden="true"></i>
                            <label for="time">Time:</label>
                            <input class="inputField" type="time" name="time" value="12:00">
                        </div>
                    </div>
                    <div class="inputBox switchButton">
                        <h5>Return:</h5>
                        <label class="switch">
                            <input type="checkbox" checked>
                            <span class="slider"></span>
                          </label>
                    </div>
                    <div class="dateNtime">
                        <div class="inputBox date">
                            <i class="fa fa-calendar icon" aria-hidden="true"></i>
                            <label for="date">Date:</label>
                            <input class="inputField" type="date" name="date" value="2020-10-31" min="2020-10-31" max="2090-12-31">
                        </div>
                        <div class="inputBox time">
                            <i class="fa fa-clock-o icon" aria-hidden="true"></i>
                            <label for="time">Time:</label>
                            <input class="inputField" type="time" name="time" value="12:00">
                        </div>
                    </div>
                    <div class="inputBox buttons">
                        <input class="loginButton" type="submit" value="Login">
                        <input class="qouteButton" type="submit" value="Quote">
                    </div>
                </form>
            </div>
        </div>

    </body>
</html>

标签： cssforms

解决方案

问题似乎是与乘客人数和行李件数相关的输入元素正在拾取默认宽度。虽然规范似乎说这应该是 20 个字符，但浏览器之间似乎有点不同。

我认为您最安全的选择是不要依赖浏览器设置的默认宽度，而是自己设置。您可以通过设置输入元素来做到这一点，也可以width: 2em通过为每个元素赋予一个 size 属性来做到这一点，这将使它们的宽度足以容纳您指定的字符数。所以size="1"对乘客size="2"来说就足够了，对行李也足够了。

顺便说一句，FF 和 Chrome 都抱怨你的 CSS 中的计算。他们需要在减号周围留出空格。我认为这对您在问题中陈述的问题没有重大影响，但您可能希望检查它们以防它们干扰其他事情。例如在 .inputBox 中使用 width:calc(100% - 10px);

推荐阅读