Question

我在safari中使用flex时遇到了一些问题。当我尝试将内容集中在输入中时，它会产生一些奇怪的效果：

strange effect

CSS

input[type=submit] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    max-width: 386px;
    height: 47px;
    margin: auto auto 0;
    font-size: 1.25em;
    line-height: 24px;
    color: #fff;
    background-color: #d08b4d;
    border-radius: 24px;
    -webkit-box-shadow: 3px 5px 10px rgba(0, 0, 0, .1);
    box-shadow: 3px 5px 10px rgba(0, 0, 0, .1);
    padding: 0;
    border: none;
    outline: 0;
    cursor: pointer
}

我同样的代码适用于div，没关系，内容在块中具有中心位置。代码部分的HTML

<form>
<h3 class="form-title">Send a message</h3>
<input type="text" name="name" title="name" placeholder="Name" required>
<input type="email" name="email" title="email" placeholder="Email" required>
<textarea name="message" id="" title="message" placeholder="Message" required></textarea>

<input type="submit" value="Send">
</form>

使用其他浏览器我没有任何好处，包括移动和桌面。该代码在safari上进行了测试＆gt; 7。是否有一些原生的CSS解决方案？

Answer 1

我在safari 9.1.2上寻找这个问题，帮助我居中项目的是旧的2009 Flexbox规范：

import java.util.*;
public class New {
    public static void main(String args[]){
        int hour,min,sec,o;
        Scanner s = new Scanner(System.in);
        System.out.println("Enter the time:");
        hour=s.nextInt();
        min=s.nextInt();
        sec=s.nextInt();

        date  d = new date();
        d.setdate(hour,min,sec);
        System.out.println(d.display());
        s.close();

        calc c = new calc();
        int a,b;
        System.out.print("Enter the first number:");
        a=s.nextInt();
        System.out.print("Enter the second number:");
        b=s.nextInt();
        c.get(a,b);
        System.out.println("Which operation do you want to perform");
        System.out.println("1.Addition\n 2.Subtraction\n 3.Multiplication\n 4.Division");
        System.out.print("Enter the Operation:");
        o=s.nextInt();
        c.compute(o);

    }

    public class date {
    int hour,min,sec;

    public void setdate(int h,int m,int s){
        hour= ((h>0 && h<24)?h:0);
        min= ((m>0 && m<60)?m:0);
        sec= ((s>0 && s<60)?s:0);
    }
    public String display(){
        return String.format("%02d:%02d:%02d",hour,min,sec);
    }}



}
public class calc {
    int a,b,o;
    double c;
    public void get(int x,int y){
        a=x;
        b=y;
    }
    public double compute(int z){
        o=z;
    switch(o)
    {
    case 1: c=a+b;
    break;
    case 2: c=a-b;
    break;
    case 3: c=a*b;
    break;
    case 4: c=a/b;
    break;
    default: System.out.println("Invalid Operation");
    }
    return c;
    }
}

尝试删除display: -webkit-box; -webkit-box-pack: center; /* justify-content */ -webkit-box-align: center; /* align-items */并查看它是否适合您。

在safari中使用flex定位内容

1 个答案: