粗大的内捧猛烈进出小视频,日本成人精品视频一区,在线播放亚洲成人av,精品人妻少妇嫩草av专区,亚洲AV永久久久久久久浪潮,性导航app精品视频,九九热精品免费视频,一本一本大道香蕉久在线播放 

  
      
    

        

	
        
		
        
			
        
				
        CSS3彈性布局怎么兼容IE（11）？
        
				
        
					
         2018-3-16      seo達人      
        
					
					
        
						
					
        
				
        
				
			
        
			
        
				
        
    如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里 

        

        
    
    
        
        彈性布局（Flexbox）確實為我們構建復雜、靈活的布局帶來了很大的便利，但是它的兼容性確實讓人很頭痛，下面是我遇到的一個問題：
    
        
    
        
        理想效果：
    
        
    
        
        
    
        
    
        
        IE11效果：
    
        
    
        
        
    
        
    
        
        html大概結構：
    
        
    
        
        
        
            
        
                [html] view plain copy
                
        
                
        
        
            
        
        
        
        
          
            
        1. 
                <div class="box">  
            
          2. 
            
        2. 
                    <div class="input-container">  
            
          3. 
            
        3. 
                        <input />  
            
          4. 
            
        4. 
                        <div class="tooltip"></div>  
            
          5. 
            
        5. 
                    </div>  
            
          6. 
            
        6. 
                    <button></button>  
            
          7. 
            
        7. 
                </div>  
            
          8. 
        
        
    
        
    
        
        這里大致說一下css，input-container寬高沒設死，由input決定，并設置position: relative;相對定位，并采用display: flex;彈性布局。tooltip設置絕對定位，通過top調整垂直位置，由input-container的彈性布局屬性設置水平居中（是不是覺得我很作死，為什么不直接用絕對定位就把垂直水平都搞定了。哈哈，一切源于一顆裝B+傻B的心，不過，能實際體會一下flexbox帶來的問題，我覺得也挺好的）。
    
        
    
        
        
        
    
        
    
        
        結果在chrome下正常，IE11下就成上圖那樣了，我上MDN Web看了一下，說彈性布局是支持IE11的（下圖），但是從上圖來看，IE下垂直方向是對的，但是水平方向卻不對，說明flexbox還是沒被支持，我也嘗試著添加了各種前綴，還是不行。
    
        
    
        
        
    
        
藍藍設計( m.xintaizi.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務 
        
        

        				
        
								
			
        
		
        
		
		
	
        


        
    
  
        
    
        日歷
        
    
        
        
        
        
    
        
  
        
    
    
        
      
        鏈接
        
      
          
                
        
    
        
    
        
      
        個人資料
        
      
        
          
        
                    
        
          
        藍藍設計的小編
          http://m.xintaizi.com
        
      
        
    
        
    
        
      
        存檔