Question

我试图用垂直和水平滚动创建一个html表，

为了实现这个目的，我创建了一个围绕桌子的div，溢出：自动应用于它，这在chrome中工作得很好，但在表格内创建了不同高度的单元格。

在Google Chrome上：

在Internet Explorer 10/11 / Edge上：

这似乎是微软已知的一个问题： bug report 至少三年但他们还没有设法修复

有没有人对此问题有任何解决方法？我需要支持IE 10，所以请在你的答案中考虑

 <html >
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <table>
        <tr>
            <td>
                <div class="container" >
                    <table class="table">
                        <tbody>
                            <tr>
                                <td>
                                123456
                                </td>
                                <td>
                                    123456789 12311 12 123456789 12311 12 123456789 12311 12 123456789 12311 12
                                    123456789 12311 12 123456789 12311 12 123456789 12311 12 123456789 12311 12
                                    45454 4545 4546 4546 654654 654654 654654 6546
                                </td>
                            </tr>
                            <tr>
                                <td>
                                asd
                                </td>
                                <td>
                                    123456789 12311 12 
                                </td>
                            </tr>
                            <tr>
                                <td>
                                asd
                                </td>
                                <td>
                                    123456789 12311 12
                                </td>
                            </tr>
                            <tr>
                                <td>
                                asd
                                </td>
                                <td>
                                    123456789 12311 12
                                </td>
                            </tr>
                             <tr>
                                <td>
                                asd
                                </td>
                                <td>
                                    123456789 12311 12
                                </td>
                            </tr>
                             <tr>
                                <td>
                                asd
                                </td>
                                <td>
                                    123456789 12311 12
                                </td>
                            </tr>
                             <tr>
                                <td>
                                asd
                                </td>
                                <td>
                                    123456789 12311 12
                                </td>
                            </tr>
                             <tr>
                                <td>
                                asd
                                </td>
                                <td>
                                    123456789 12311 12
                                </td>
                            </tr>
                             <tr>
                                <td>
                                asd
                                </td>
                                <td>
                                    123456789 12311 12
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

Answer 1

我通过对所有td元素应用高度：100％来解决问题

solution

package nl.test123.testsoundboard;

import android.media.MediaPlayer;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;
//import nl.test123.R;

public class MainActivity extends AppCompatActivity {
    MediaPlayer mysound1;
    MediaPlayer mysound2;
    MediaPlayer mysound3;

    private TextView mTextMessage;

    private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
            = new BottomNavigationView.OnNavigationItemSelectedListener() {

        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.navigation_top:
//                    mTextMessage.setText(R.string.title_top);
                    return true;
                case R.id.navigation_latest:
//                    mTextMessage.setText(R.string.title_latest);
                    return true;
                case R.id.navigation_favorite:
//                    mTextMessage.setText(R.string.title_favorite);
                    return true;
            }
            return false;
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mTextMessage = (TextView) findViewById(R.id.message);
        BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);


        mysound1 = MediaPlayer.create(this, R.raw.bird);
        mysound2 = MediaPlayer.create(this, R.raw.bomb);
        mysound3 = MediaPlayer.create(this, R.raw.dog);
    }

    public void sound1(View view){
        mysound1.start();
    }
    public void sound2(View view){
        mysound2.start();
    }
    public void sound3(View view){
        mysound3.start();
    }
}

IE 10,11，边缘表单元格高度在div内变化，溢出-y：auto

1 个答案: