写了一个form，然后在safari、chrome、firefox浏览器中各种不兼容

Question

1.写了几个type为text的和为password的input，然后在浏览器中各种看，结果各种不兼容，safari中的password的placeholder不显示，输入内容不显示，firefox中placeholder一个不显示。然后网上找了解决方案

    // Firefox 4-18
    input:-moz-placeholder,
    textarea:-moz-placeholder {
      color: #fff;
      opacity: 1;
    }
    
    // Firefox 19+
    //::-moz-placeholder 伪元素在Firefox 19+替代了之前的 :-moz-placeholder 伪类.
    input::-moz-placeholder,
    textarea::-moz-placeholder{
      color: #fff;
      opacity: 1;
    }
    
    // Internet Explorer 10+
    // 经测试，现在这种写法在IE10+上设置没有反应，兼容性还有待探讨
    :-ms-input-placeholder,
    textarea:-ms-input-placeholder{
      color: #fff;
    }

    // Safari and Chrome
    // 必须加上元素标签，不然不生效
    input::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder{
      color: #fff;
    }
    
    ::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder{
      color: #fff;
    }

然后还是没有什么用，请问有什么解决方案么

safari

firefox